I am trying to load my ply file using Three.js. It has worked but I almost don't see any colors. There are some glimpses here and there, but it's mostly black (the first image below). The image opens properly (with colors) in MeshLab (the second image below). I have tried vertexColors: THREE.VertexColors (as suggested in Three.js - ply files - why colorless?) and vertexColors: THREE.FaceColors but nothing seemed to help. I am a three.js newbie, so please tell me what am I doing wrong.
and my code:
<!doctype html>
<html lang="en">
<head>
<title>Icon 7</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/PLYLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(35, WIDTH / HEIGHT, 0.1, 100);
camera.position.set(0,0.15,3);
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColor(0xd3d3d3, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(0,200,100);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.PLYLoader();
loader.load( './models/foot.ply', function ( geometry ) {
geometry.computeVertexNormals();
geometry.center();
var material = new THREE.MeshStandardMaterial ({ shininess: 1000,vertexColors: THREE.FaceColors } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.castShadow = false;
mesh.receiveShadow = false;
scene.add( mesh );
} );
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.userPanSpeed = 0.05;
}
// Renders the scene and updates the render as needed.
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
Edit: as I don't have separate textures, this is not a duplicate question.
Instead of using MeshStandardMaterial use MeshBasicMaterial
Related
my main.js file contains :-
import './style.css';
import * as THREE from 'three';
//create scene
const scene = new THREE.Scene();
//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000,
);
const renderer = new THREE.WebGLRenderer({
//which DOM element to use
canvas: document.querySelector('.canvas'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth / window.innerHeight);
camera.position.setZ(100);
//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true});
//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);
scene.add(globe);
function animate(){
requestAnimationFrame(animate); //optimized rendering
//rotation
globe.rotateOnAxis += 0.01;
renderer.render( scene, camera );
}
animate();
renderer.render(scene, camera);
and my index.html :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Gautam</title>
</head>
<body>
<canvas id="globe">This is the canvas
</canvas>
<script type="module" src="./main.js"></script>
</body>
</html>
All that appears on my screen is :-
[what displays on my browser][1]
[1]: https://i.stack.imgur.com/PQmJu.png
I checked and my main.js file is definitely executing, but nothing is rendering on the screen
You have a few issues.
document.querySelector('.canvas')
This would select elements with the class canvas, but your DOM has no such element. It does have an element with the type canvas and the ID globe, so that line should be one of the following:
document.querySelector('canvas')
document.querySelector('#globe')
document.getElementById('globe')
Next,
renderer.setSize(window.innerWidth / window.innerHeight);
As #Mugen87 points out, this should be
renderer.setSize(window.innerWidth, window.innerHeight);
As you've written it, the renderer's width is being set to the quotient, and its height (the missing second parameter) is being set to undefined, a situation that three.js has no handling for.
And,
globe.rotateOnAxis += 0.01;
rotateOnAxis is a function that takes a vector (the axis of rotation) and a scalar (the rotation angle) as its parameters. By assigning +0.01 to it, you're simply replacing the function itself, not calling the function. If, for example, you want to rotate around the globe's y-axis, you could use
globe.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0.01);
Finally, the second call to renderer.render(...) (the one outside the animate() function) is unnecessary.
renderer.setSize(window.innerWidth / window.innerHeight);
Call the method like so instead:
renderer.setSize(window.innerWidth, window.innerHeight);
//create scene
const scene = new THREE.Scene();
//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000,
);
const renderer = new THREE.WebGLRenderer({
//which DOM element to use
canvas: document.querySelector('#canvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(100);
//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({
color: 0xffff00,
wireframe: true
});
//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);
scene.add(globe);
function animate() {
requestAnimationFrame(animate); //optimized rendering
//rotation
globe.rotateOnAxis += 0.01;
renderer.render(scene, camera);
}
animate();
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.140.2/build/three.min.js"></script>
<canvas id="canvas"></canvas>
I am a novice to Javascript and ThreeJS. I have a 3D rotating cube that appears on top of a static background, but one frustrating property is that the cube typically appears first and then the background image appears. How do I ensure the background is rendered first? Specifically, I always want the background image to appear before the cube.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
function resize() {
var aspect = window.innerWidth / window.innerHeight;
let texAspect = bgWidth / bgHeight;
let relAspect = aspect / texAspect;
bgTexture.repeat = new THREE.Vector2( Math.max(relAspect, 1), Math.max(1/relAspect,1) );
bgTexture.offset = new THREE.Vector2( -Math.max(relAspect-1, 0)/2, -Math.max(1/relAspect-1, 0)/2 );
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
const scene = new THREE.Scene();
// Arguments:
// 1) Field of Value (degrees)
// 2) Aspect ratio
// 3) Near clipping plane
// 4) Far clipping plane
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
// Need to set size of renderer. For performance, may want to reduce size.
// Can also reduce resolution by passing false as third arg to .setSize
renderer.setSize( window.innerWidth, window.innerHeight );
// Add the rendered to the HTML
document.body.appendChild( renderer.domElement );
// A BoxGeometry is an object that contains all points (vertices) and fill (faces)
// of the cube
const geometry = new THREE.BoxGeometry();
// Determines surface color (maybe texture?)
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// Mesh takes a geometry and applies the material to it
const cube = new THREE.Mesh( geometry, material );
// Add background image
const loader = new THREE.TextureLoader();
bgTexture = loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' ,
function(texture) {
// Resize image to fit in window
// Code from https://stackoverflow.com/a/48126806/4570472
var img = texture.image;
var bgWidth = img.width;
var bgHeight = img.height;
resize();
});
scene.background = bgTexture;
// By default, whatever we add to the scene will be at coordinates (0, 0, 0)
scene.add( cube );
camera.position.z = 5;
// This somehow creates a loop that causes the rendered to draw the scene
// every time the screen is refreshed (typically 60fps)
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
This is happening because the texture is taking longer to load than it takes for Three.js to set up the rest of the scene. You already have a handler for the onLoad callback of TextureLoader.load(), so we can use that to adjust the behavior.
Before scene.add( cube );, add a new line:
cube.visible = false;
Now the cube will still be added to the scene, but it won't be visible. Now after the resize() call at the end of function(texture), add
cube.visible = true;
While testing the problem and solution locally, I ran into a few other, less significant issues with your code. You can see all of the changes I had to make to get it running properly at this Gist.
I'm pretty beginner in three.js and webgl programming. so I have created a box in three.js and its working fine but the problem is when I set camera position in z axis(eg: camera.position.z = 2; ) the box just disappears. could anyone explain me why is it happening and how can I properly set the position of the camera?
try uncommenting the camera.position.z = 2; in the fiddle
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
scene.add(box);
var camera = new THREE.Camera(45, window.innerWidth/window.innerHeight, 1, 1000 );
//camera.position.z = 2;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color : 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
init();
not sure if you're trying to create this scene with an orthographic camera or perspective camera, but you'll typically need to specify the camera by type (ie THREE.PerspectiveCamera(...)).
I also added a few extra lines to ensure the camera was configured correctly, namely, setting the "LookAt" point to (0,0,0) , as well as setting an actual position of the camera via the THREE.Vector3.set(...) method.
Here are my adjustments to your code:
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
scene.add(box);
var camera = new THREE.PerspectiveCamera(70,
window.innerWidth/window.innerHeight, 0.1, 1000 ); // Specify camera type like this
camera.position.set(0,2.5,2.5); // Set position like this
camera.lookAt(new THREE.Vector3(0,0,0)); // Set look at coordinate like this
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color : 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
init();
Try
camera.position.set( <X> , <Y> , <Z> );
where <X> and <Z> are 2D coordinates and <Y> is height
When using three.js, I found a conflict between dat.gui.js and trackballControl.js. For example, after changing values by dat.gui, I can't rotate the camera with mousemove because the mouse can not move out from the area of GUI. Why and how to deal with it?
The trackballControls constructor allows for a second argument of a dom element.
This dom element is what the mouse event listeners for the controls will be added to. If you don't supply this argument, the mouse event listeners will be added to the document (which I believe is your problem).
It is hard to give you an example which will work for you, because you have not posted your code.
You should be able to send the renderer dom element to the trackballControls to fix your problem.
eg.
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
// send dom element to trackballControlls.
controls = new THREE.TrackballControls( camera, renderer.domElement );
Run snippet below for working example.
var camera, scene, renderer, mesh, material, controls, gui, directionalLight;
init();
render();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
// Add TrackballControls, sending dom element to attach mouseevent listeners to.
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.addEventListener( 'change', render );
// Create scene.
scene = new THREE.Scene();
// Create material
material = new THREE.MeshPhongMaterial();
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);
// Add GUI
var gui = new dat.GUI();
var lightFolder = gui.addFolder('Light');
lightFolder.add(directionalLight, 'intensity').onChange(function(){render()});
lightFolder.open();
}
function animate() {
requestAnimationFrame(animate);
controls.update();
}
// Only called by controls change or gui change.
function render() {
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
controls.handleResize();
}
body {
margin: 0px;
}
<script src="https://cdn.rawgit.com/dataarts/dat.gui/v0.6.2/build/dat.gui.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>
i asked yesterday about how to draw 3D objects in the browser, be able to manipulate them with the mouse and be sure that it works in every browser. Now i am using three.js and im quite happy because it actually works.
I was able to understand the basic tutorial, draw my first scene and rotate the first cube etc.
Now i want to be able to rotate the complete scene with the mouse, googled and found this link. Works fine in the example and i tried to copy the example. Current code looks like this:
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
<script type="text/javascript">
// Variables
var scene, camera, controls, renderer;
var geometry, material, cube;
init();
animate();
render();
function init() {
// Scene, camera
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 500, window.innerWidth / window.innerHeight, 0.1, 1000 );
// Mouse controls
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener('change',test,false);
// Renderer
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Basic cube to show
geometry = new THREE.CubeGeometry(10,10,10);
material = new THREE.MeshBasicMaterial({color:0x00ff00});
cube = new THREE.Mesh(geometry);
scene.add(cube);
camera.position.z = 10;
}
function test() {
alert("hi");
render();
}
function animate() {
requestAnimationFrame(render);
controls.update();
}
function render() {
renderer.render(scene, camera);
//cube.rotation.x += 0.1;
//cube.rotation.y += 0.1;
}
</script>
</body>
But it doesn't work. The testoutput "hi" only appears once. It should appear quite often when using the mouse. What i tried to accomplish is that controls.addEventListener('change',test,false); looks if anything with the mouse changes (position, keydown etc.) and then calls a new renderframe. In the example (Example) it somehow does what i want it to do.
What am i doing wrong here? I just want to be able to rotate the camera with mousedragging. And yes i am totally new to this. Just read about it for 2 hours now.
Thanks in advance.