How to rotate an object using local coordinates [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I can't find how to rotate an object around it's local coordinates, I tried using the rotation property, but it rotates the object around the world axis. I also tried to displace the object, set it at position (0,0,0), then rotate it and put it back where it was, but it doesn't work.
I don't find a way, any suggest?

Check here working code.
var camera, scene, renderer, geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}

Related

Some transparent textures in three.js

Some textures are transparent when I render them out in the browser. Is there a way to solve this issue? Im just started learing Three.js.
image of the issue
loader.load(model, (object) =\>
{
object.position.set(-0.8,-0.5,-0.2)
scene.add(object)
scene.add(pointLight)
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 2;
camera.position.y = 1;
camera.position.x = 2.8;
function animate(){
requestAnimationFrame(animate);
controls.update();
renderer.render(scene,camera);
}
animate();
}
Tried with multiple models but always same result.
Those areas are transparent because you're looking at the back-face of your geometry. Rendering the back-face is disabled by default, but you can enable it on your material:
object.material.side = THREE.DoubleSide;
You can read more about Material.side in the docs.

How do I get three.js to show up in browser?

whenever I try to open and see my progress with three.js on my browser locally, it will not load and throws me this error,
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
I'm new to three.js and been stuck for a while and haven't even really gotten started. I appreciate the help. If my first lines of the javascript file is: import * as THREE from '/Users/16103/Desktop/three'. Thank you!
Try using a demo with a cdn like this simple one taken from their samples. You can download the script from cdn locally.
var camera, scene, renderer, geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.js"></script>
<canvas style="margin-top:-200px"></canvas>

I can't see the object in Three.js [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
So I'm trying to make a portafolio with three.js. The problem is that I can't see the object in the page and I don't know what is wrong with my code. here is the project https://codepen.io/BernardoOlisan/pen/vYJmpVZ
What is wrong with my code?
<h1>Three.js</h1>
<canvas id="bg"></canvas>
CSS
canvas {
position: relative;
width: 100%;
top: 200px;
}
JS
// Main js for Three.js seciton work
import * as THREE from "https://cdn.skypack.dev/three";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.ineerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
camera.position.setZ(30);
renderer.render( scene, camera)
const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 )
const material = new THREE.MeshBasicMaterial( { color: 0xFF6347 } );
const torus = new THREE.Mesh( geometry, material );
scene.add(torus)
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate()
Just a typo at window.ineerWidth
const camera = new THREE.PerspectiveCamera( 75, window.ineerWidth / window.innerHeight, 0.1, 1000 );

ThreeJS not rendering Cube with setAnimationLoop

So I'm working on a ThreeJS WebVR Page. (I'm quite new to three.js)
So I tired to make a basic scene to test some stuff. But when I load the page with renderer.setAnimationLoop(render) I get my green cube for 1 Frame and then it disappears.
(I got it working with requestAnimationFrame() but this will not work with WebVR)
This is my code for my test sandbox:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.vr.enabled = true;
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function render() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
function animate() {
renderer.setAnimationLoop(render);
}
animate();
//Button vor start VR Session
document.body.appendChild(WEBVR.createButton(renderer));
Not the problem with setAnimationLoop
The problem is you cannot set camera position when vr is enabled
check this stack overflow question
Unable to change camera position when using VRControls
Check this CodePen Link where i fixed your code by changing position of cube instead of camera
var cube = new THREE.Mesh(geometry, material);
cube.position.z = -5; //added this instead of camera.position.z = 5;
if you want to move the camera you need make it as child of another object and set the position to that object

Two planes which very close to each other [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i have got a problem with 2 planes which are very close to each other.
One of the planes is causing glitches or even disappearing on certain point of view.
Here is the code:
var renderer, scene, camera, controls, mesh;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 16, window.innerWidth / window.innerHeight, 1, 50000 );
camera.position.set(8000, 4000, 13000);
controls = new THREE.OrbitControls( camera );
controls.target = new THREE.Vector3(0,0,0);
controls.minPolarAngle = 0
controls.maxPolarAngle = (Math.PI / 2) - 0.05;
mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 7000, 7000 ), new THREE.MeshBasicMaterial);
mesh.position.y = 0;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshBasicMaterial({color:0x00ff00}));
mesh.position.y = 5;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
Here is the fiddle: http://jsfiddle.net/mae1storm/2hLjn1t5/1/
What can i do to fix this problem?
Sorry for my bad english, Thank You.
The problem comes from the depth testing. These planes are so close together that their depth values are the same at some points, so the rasterizer can't really decide which one is in front of which. To solce this problem you have to either increase the distance between the two planes, or cur a whole in the bigger plane with the size of the smaller plan. Or in this case specifically, use a texture instead.
Also your scene is huge, which contributes to the precision issues. Scale it way down and you should be fine again. If your scene would be like 1/100th of the size it will work a lot better.

Categories

Resources