• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

ancc2020,2021, How to use other js (treejs)

Enthusiast ,
Feb 01, 2021 Feb 01, 2021

Copy link to clipboard

Copied

I need to use "treejs."

But when I added to ANIMATE CC, I couldn't use it.

 

341.JPG

threejs

https://github.com/mrdoob/three.js/

 

How can I use it?

Please help me.

 

 

Views

931

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 04, 2021 Feb 04, 2021

1.  download three.js-dev.zip from GitHub - mrdoob/three.js: JavaScript 3D library.

2.  unzip the files

3.  start a new animate project and save it

4.  open the include scripts panel use the add icon to navigate to and include Three.min.js in the build folder*

5.  add the sample code to frame 1**

 

*gif.png

 

**

gif.png

 

 

Votes

Translate

Translate
Community Expert ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

it might not be ready to use until frame 2 (or you use some other delay) of your main timeline plays (assuming you added it correctly in the global script panel).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

I only add to the global script panel.

No code was written.

The browser displays an error.

I've experimented with all versions"treejs"

treejs is not available.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

then you have an incorrect name and/or path in the script panel.

 

p.s. it's pretty suspicious that you reference three.js (which is a js library) and you reference tree.js (and it's not clear what that is other than a probable typo).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

Anyway, thank you.

Now I still can't use treejs,

I can only change to another editor.

I don't know what's built into the ANIMATE software.

and support what.

I also use Pixijs.

Pixij is available.

Other JS libraries are sometimes unavailable and do not know why.

Configuration, just a reference to the Js library?

Whether additional action is required?

A lot of things don't understand

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

embed a screenshot of your include code.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

There is no code.

Blank scene,Output the preview directly.

 

345.JPG

346.JPG

347.JPG348.JPG

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

then how are you adding three.js to your animate project?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

As a test, I used an example

https://github.com/mrdoob/three.js/

And then because it can't be displayed.

So delete this code.

No code was written
The page is also reported as an error

Although this library is included in ANIMATE.

This Js library is not actually referenced correctly

 

 




import
* as THREE from './js/three.module.js'; let camera, scene, renderer; let geometry, material, mesh; init(); function init() { camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 ); camera.position.z = 1; scene = new THREE.Scene(); geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animation ); document.body.appendChild( renderer.domElement ); } function animation( time ) { mesh.rotation.x = time / 2000; mesh.rotation.y = time / 1000; renderer.render( scene, camera ); }

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

i have no idea what you're trying to do.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

I need to import a 3D model and make an HTML5VR project.

I useTREEJS because animate CC itself does not support it.

The 3D model is in OBJ format

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

start a new vr project

in the actions panel expand global

click include

click the plus to add three.js (and IT'S THREE NOT TREE)

test

any problem

 

gif.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

 

I did this, and the browser reported an error.

cuo1.JPGcuo2.JPG

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

Use ANIMATE CC2021 built-in VR360.

The browser also reports an error.

But after a few new projects, the mistake disappeared.

When it is considered that there are no errors,, the browser reports the error again.

The error points to line 22 of "vr-runtime-1.1.0.js"

 

3641.JPG

 

Then I used TreejS

Tested with nodejs servers.

Line 7 is just a title.

 

432.JPG

231.JPG

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

include Three.js or Three.min.js from the build folder

 

i don't see an error: three_test (kglad.com)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

nodejs record

231.JPG

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

1.  download three.js-dev.zip from GitHub - mrdoob/three.js: JavaScript 3D library.

2.  unzip the files

3.  start a new animate project and save it

4.  open the include scripts panel use the add icon to navigate to and include Three.min.js in the build folder*

5.  add the sample code to frame 1**

 

*gif.png

 

**

gif.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

Thank you very much.

I downloaded your demo HTML.

After comparison, it was found that the animation could not be displayed even if the code was the same.

And then,I download "treejs" on your web page.

With this I can run.

The file I downloaded is the tree-master of the official website.

I found that js were not available.

I downloaded it from github, and Js was also damaged.

I don't know what caused it.

I'm sorry to have caused you a lot of trouble.

 

Thank you again

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

you're welcome 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

Hello!)
Can you please tell me how to insert a scene object into a movieclip? Otherwise, a new Canvas appears in the final HTML.
Thx)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

@Mike316586011o7f 

 

what are you trying to do?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

Mike316586011o7f_0-1706629966168.png

Is it possible to insert an object TREE JS into a movieclip in this situation?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

Mike316586011o7f_0-1706630193706.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 30, 2024 Jan 30, 2024

Copy link to clipboard

Copied

you can add three.js (and any js library) to animate 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines