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

209

Likes

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

Adobe Community Professional , 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** * **

Likes

Translate

Translate
Adobe Community Professional ,
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).

Likes

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.

 

Likes

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
Adobe Community Professional ,
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).

Likes

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

Likes

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

 

Likes

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
Adobe Community Professional ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

embed a screenshot of your include code.

Likes

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

Likes

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
Adobe Community Professional ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

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

Likes

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 ); }

 

Likes

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
Adobe Community Professional ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

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

Likes

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

Likes

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
Adobe Community Professional ,
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

Likes

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

Likes

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

 

 

Likes

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
Adobe Community Professional ,
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)

Likes

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

Likes

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
Adobe Community Professional ,
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

 

 

Likes

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

Likes

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
Adobe Community Professional ,
Feb 04, 2021 Feb 04, 2021

Copy link to clipboard

Copied

LATEST

you're welcome 

Likes

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