Here’s a project with a rotating camera. Looking through the source it seems to just move the camera position in a circle. function onDocumentMouseMove( event ) { event.preventDefault(); if ( isMouseDown ) { theta = – ( ( event.clientX – onMouseDownPosition.x ) * 0.5 ) + onMouseDownTheta; phi = ( ( event.clientY – onMouseDownPosition.y ) … Read more
One way to start/stop is like this var requestId; function loop(time) { requestId = undefined; … // do stuff … start(); } function start() { if (!requestId) { requestId = window.requestAnimationFrame(loop); } } function stop() { if (requestId) { window.cancelAnimationFrame(requestId); requestId = undefined; } } Working example: const timeElem = document.querySelector(“#time”); var requestId; function loop(time) … Read more
Both your spheres are transparent, and are remaining so. What is happening is that the smaller sphere is not being rendered at all. Transparency in WebGL is tricky. You can google the issue to find out more about it. But you have stumbled upon an issue related to how three.js in particular handles transparency. The … Read more
You do not need to have any objects in your scene to do this. You already know the camera position. Using vector.unproject( camera ) you can get a ray pointing in the direction you want. You just need to extend that ray, from the camera position, until the z-coordinate of the tip of the ray … Read more
I came across this when I started using three.js as well. It’s actually a javascript issue. You currently have: renderer.setClearColorHex( 0x000000, 1 ); in your threejs init function. Change it to: renderer.setClearColorHex( 0xffffff, 1 ); Update: Thanks to HdN8 for the updated solution: renderer.setClearColor( 0xffffff, 0); Update #2: As pointed out by WestLangley in another, … Read more
If you want a transparent background in three.js, you need pass in the alpha parameter to the WebGLRenderer constructor. var renderer = new THREE.WebGLRenderer( { alpha: true } ); You can leave the clear color at the default value. renderer.setClearColor( 0x000000, 0 ); // the default three.js r.71
Since you have big ambitions, you have to invest the time to learn the fundamentals. It is not a matter of what you learn first — you can learn them simultaneously if you want to. (That’s what I did.) This means that you need to understand: WebGL concepts Three.js The underlying mathematical concepts Three.js. Three.js … Read more
My crystal ball says that you are loading the model using either file:// or C:/, which stays true to the error message as they are not http:// So you can either install a webserver in your local PC or upload the model somewhere else and use jsonp and change the url to http://example.com/path/to/model Origin is … Read more