Three.js - VRML Loader - javascript

I'm trying to use the Three.js with VRML (WRL) models. What I am wondering is that the model is loaded with variations of colors (colored). How can I load the model in solid color as the original file?
My example is: http://dev.logicarts.com.br/semapro/projeto-3d/teste-1.html
The code:
<div id="info">
three.js -
vrml format loader test -
<!--model from VRML 2.0 Tutorial,-->
</div>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/VRMLLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 6;
controls = new THREE.OrbitControls( camera );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.noZoom = false;
controls.noPan = false;
scene = new THREE.Scene();
scene.add( camera );
// light
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
var loader = new THREE.VRMLLoader();
loader.addEventListener( 'load', function ( event ) {
scene.add(event.content);
} );
loader.load( "3d/conjunto-carcaca.wrl" );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
stats.update();
}
</script>

If you add this code under the scene.add(event.content); statement, all the objects in your scene will turn red.
scene.traverse (function (object)
{
if (object instanceof THREE.Mesh) {
object.material.color.setHex( 0xff0000 );
}
});

Related

Three js renderer size issues. Trying to set a perfect size

I've been working on three js model , to embed the model to my website. Finally made it but there's only one problem.I couldn't get the renderer.setSize() to fit my div. In other words, I can see scroll bar which I don't want to see there. How do I setSize so that it perfectly fits my canvas ?
I saw one post regarding the same problem , he wanted to avoid scrolling as well. I tried to follow the answer as stated in the post but nothing's going on. Then I headed to three js documentation , followed what stated there.
.setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : null
Still couldn't figure it out. Why even the code in documentation is not working ? BUT , i'm not sure if I found a trick , I was just playing around with the setSize values.
renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);
as you can see there , I added * 0.99 , and there's no more scroll bar! Didn't mean to do it this way , but what's the correct code to adjust it ? Here's my code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>THEE JS BOX APP</title>
<style>
body { margin: 0; width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJloader.js"></script>
<script>
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 200;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#ffffff");
renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// instantiate a loader
var loader = new THREE.OBJLoader();
// load a resource
loader.load(
// resource URL
'img/logovoivode1.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
// ***************************** LIGHTING **********************************//
// White directional light at half intensity shining from the top.
//var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 );
//scene.add( directionalLight );
var light = new THREE.AmbientLight( 0xffffff, 0.5); // soft white light
scene.add( light );
var pointlight = new THREE.PointLight( 0xffffff, 0.5, 1000);
light.position.set(10, 0, 25);
scene.add(pointlight);
//var DLight = new THREE.DirectionalLight( 0xffffff, 50);
//scene.add(DLight);
// var spotlight = new THREE.SpotLight( 0xffffff, 0.5, 1000, 0.3);
// ************************ END-OF-LIGHTING *****************************//
// CREATING A BOX
// var geometry = new THREE.BoxGeometry(1, 1, 1);
// var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true});
// var cube = new THREE.Mesh( geometry, material);
// ADD CUBE TO THE SCENE
// scene.add(cube);
// ANIMATION LOOP
function animate() {
requestAnimationFrame( animate );
//scene.rotation.x += 0.01;
//scene.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
Your issue is caused by "inner element whitespaces".
When an html parser parses your source code, it also parses the spaces/entets/tabs between your tags as text, and then makes it smaller till its just 1 space. This 1 space is the cause of your issue, but knowing what causes it is the first step to solving the problem.
Original problem, for reference:
body {
margin: 0;
width: 100%;
height: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 200;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#ffffff");
renderer.setSize( window.innerWidth ,window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
Using font-size: 0
By setting the font-size to 0, you basically squash the space to PX width and height, making sure it doesn't contribute to your problem
body {
margin: 0;
width: 100%;
height: 100%;
font-size: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 200;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#ffffff");
renderer.setSize( window.innerWidth ,window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
Using overflow: hidden
Just take our problems, and hide them for the next person trying to fix it properly.
body {
margin: 0;
width: 100%;
height: 100%;
}
html, body {
overflow: hidden;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 200;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#ffffff");
renderer.setSize( window.innerWidth ,window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
Using display: flex
When you use the flex display mode, the browser ignores all inner white spaces in the current element
body {
margin: 0;
width: 100%;
height: 100%;
display: flex;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 200;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#ffffff");
renderer.setSize( window.innerWidth ,window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
Setting the display of the canvas to block
If you set the display property of the canvas to block, then you don't have to worry about the inner element white spaces, as they don't have anny effect between block elements.
body {
margin: 0;
width: 100%;
height: 100%;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.101.1/examples/js/controls/OrbitControls.js"></script>
<script>
// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 200;
// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );
// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#ffffff");
renderer.setSize( window.innerWidth ,window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );
// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
scene.add( new THREE.Mesh( new THREE.CubeGeometry(100,130,70), new THREE.MeshBasicMaterial({ color: 0x444444 }) ) );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>

Rotate object with rotated parent in world space?

I'm using this function to rotate object Y axis in world space:
function rotateWorldYAxis( obj, angle ) {
quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
obj.updateMatrixWorld();
}
But it doesn't work with the object has rotated parent.
Here is example Fiddle:
Correct behavior when parent not rotated:
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, controls;
var renderer;
var quat = new THREE.Quaternion();
var axis = new THREE.Vector3();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.set( 0, 0, 500 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
var light = new THREE.PointLight( 0xffffff );
light.position.set(100,100,100);
scene.add( light );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
//____________________________//
cube = new THREE.Mesh(
new THREE.CubeGeometry(50,100,50),
new THREE.MeshPhongMaterial()
);
cube.rotation.set(Math.PI/3, 0, 0);
cubeParent = new THREE.Object3D();
cubeParent.rotation.set(0,0,0) //Not rotated parent
cubeParent.add(cube)
scene.add(cubeParent)
//____________________________//
var grid = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 10, 10),
new THREE.MeshBasicMaterial({wireframe: true})
)
grid.position.y = -100
grid.rotation.x = Math.PI/2
scene.add(grid);
window.addEventListener( 'resize', onWindowResize, false );
}
function rotateWorldYAxis( obj, angle ) {
quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
obj.updateMatrixWorld();
}
function animate() {
requestAnimationFrame( animate );
render();
rotateWorldYAxis(cube, 0.01)
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
<script src="https://threejs.org/build/three.js"></script>
<p style="position: fixed;z-index:1;top:0;text-align:center;color: #fff">This is correct behavior</p>
Wrong behavior when parent is rotated:
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, controls;
var renderer;
var quat = new THREE.Quaternion();
var axis = new THREE.Vector3();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.set( 0, 0, 500 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
var light = new THREE.PointLight( 0xffffff );
light.position.set(100,100,100);
scene.add( light );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
//____________________________//
cube = new THREE.Mesh(
new THREE.CubeGeometry(50,100,50),
new THREE.MeshPhongMaterial()
);
cube.rotation.set(Math.PI/3, 0, 0);
cubeParent = new THREE.Object3D();
cubeParent.rotation.set(1,0,0) //Rotated parent
cubeParent.add(cube)
scene.add(cubeParent)
//____________________________//
var grid = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 10, 10),
new THREE.MeshBasicMaterial({wireframe: true})
)
grid.position.y = -100
grid.rotation.x = Math.PI/2
scene.add(grid);
window.addEventListener( 'resize', onWindowResize, false );
}
function rotateWorldYAxis( obj, angle ) {
quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
obj.updateMatrixWorld();
}
function animate() {
requestAnimationFrame( animate );
render();
rotateWorldYAxis(cube, 0.01)
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
<script src="https://threejs.org/build/three.js"></script>
<p style="position: fixed;z-index:1;top:0;text-align:center;color: #fff">Parent rotate cause this wrong behavior, this cube need to rotates on Y world axis</p>
Any help is appreciated! Thank you!

Rotate sphere by clicking on link in three.js

I have created a sphere and I have a set of link. I want to change the position of sphere or rotate the sphere by clicking any of the link. I have tried to search a lot but can't find any example similar to this.
It's just a matter of creating an HTML element and associate a JS function to its "onclick" event. Here's quick implementation on a basic scene, using a button (you can replace it with a link or whatever you like):
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotate Mesh On Button Clicked</title>
</head>
<body>
<button onclick="myFunction()">Rotate</button>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>
<script type="text/javascript" src="scene.js"></script>
</body>
</html>
JavaScript
var container, camera, scene, renderer;
var geometry, material, mesh;
var cameraControls;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xdbdbdb );
container.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 3, 0.5, 40 );
scene.add( camera );
// controls
cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
// lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( light );
// objects
geometry = new THREE.CylinderGeometry( 5, 5, 5, 5 );
material = new THREE.MeshPhongMaterial( {color: 0x00aafa} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
window.addEventListener( 'resize', onWindowResize, false );
}
function myFunction() {
mesh.rotateX(90);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
cameraControls.update();
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
As you can see when the button is clicked it calls "myFunction", which rotates the Mesh by 90°, pretty simple.

Three.js Object3D division and custom coloring

I want to ask for some help with my project of temperature change on model. I'm using OBJLoader to load my model exported from autoCAD,
and I need to show temperature change on it by color change. I'm stuck on point, how to divide loaded object to smaller regions,
maybe set them some id and than set that region the particular color.
I will be grateful for any help or advice.
By now, I have this:
<body>
<div id="info">
three.js - Temperature model
</div>
<script src="../three.js-lib/build/three.min.js"></script>
<script src="../three.js-lib/examples/js/loaders/OBJLoader.js"></script>
<script src="../three.js-lib/examples/js/Detector.js"></script>
<script src="../three.js-lib/examples/js/controls/OrbitControls.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
var container;
init();
function init() {
container = document.getElementById("container");
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x999999 ) );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
camera.up.set( 0, 0, 10 );
camera.position.set( 0, -150, 95 );
camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
scene.add( camera );
var grid = new THREE.GridHelper( 200, 10.0 );
grid.setColors( 0xffffff, 0x555555 );
grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
scene.add( grid );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x999999 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//loader
loadModel();
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target.set( 0, 1.2, 2 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function loadModel() {
var onProgress = function (xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function (xhr) {};
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
console.log(item, loaded, total);
};
var loader = new THREE.OBJLoader(manager);
loader.load('temperature/suciastka.obj', function (object) {
object.traverse(function (child){
if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshPhongMaterial({color: 0x451E0C, vertexColors: THREE.VertexColors});
}
})
scene.add(object);
render();
}, onProgress, onError);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>

How to use EdgesHelper on imported Collada model in three.js

I'm trying to use EdgesHelper on loaded Collada model in three.js and having problems with:
applying edges to the whole model geometry,
misalignment and scale differences between the Collada model
and generated edges.
http://codepen.io/znak/pen/raqBLM?editors=001
var controls, scene, camera, renderer;
var light;
var dae, daeGeometry, daeMaterial, daeMesh, daeEdges;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'http://www.lenart.pl/assets/codepen/FestoolClamp2.dae', function ( collada ) {
dae = collada.scene;
daeMaterial = new THREE.MeshBasicMaterial( { color: 0xaaaaaa } );
collada.scene.traverse( function ( child ) {
if ( child.material ) child.material = daeMaterial;
if ( child.geometry ) {
daeMesh = new THREE.Mesh( child.geometry, daeMaterial );
daeEdges = new THREE.EdgesHelper( daeMesh, 0x444444 );
}
} );
dae.updateMatrix();
init();
render();
} );
function init() {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 150, -350 );
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
light = new THREE.DirectionalLight( 0xffffff, .75 );
light.position.set( 0, 1, -2 );
scene.add( light );
dae.add( daeEdges );
scene.add( dae );
dae.scale.x = dae.scale.y = dae.scale.z = 10;
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
function animate() {
requestAnimationFrame( animate );
dae.rotation.y += 0.002;
controls.update();
render();
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
Any help would be appreciated.
Traverse the scene objects and add edges using EdgesHelper in the loader callback:
object3D.traverse(function(o){ if (o.type === "Mesh") {
var m = new THREE.EdgesHelper(o, 0x0);
m.matrixAutoUpdate = true;
m.matrix = o.matrix;
o.add(m);
} });
You should see outline on your imported dae models. I'm using this in one of my projects.

Categories