I am using the following code to render a Blender model (the default cube one just to start out) and nothing is showing up:
<html>
<head>
<title>Test page for the </title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container"></div>
<script src="src/three.min.js"></script>
<script src="src/Stats.js"></script>
<script>
var camera, scene, renderer, loader;
init();
render();
function init(){
var container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(10, window.innerWidth/window.innerHeight, 1, 500);
camera.position.y = 100;
camera.position.z = 100;
controls = new THREE.TrackballControls( camera );
scene = new THREE.Scene();
loader = new THREE.JSONLoader();
loader.load('obj/one.js', function (geometry){
mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial({overdraw: true}));
scene.add(mesh);
});
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
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 render(){
renderer.render(scene, camera);
controls.update();
stats.update();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>
Everything is placed in their paths correctly and all I get is a blank screen. Advice?
Its because you aren't animating. The collada loader is a callback function so it finishes loading well after the initial page render and then adds the object to the scene. Since there is no animation loop, the page will never redraw once the model finishes loading.
Related
I have tested PCL triangluation introduced here:
And from the experiment I got a .vtk file.
And I tried to render it via web browser whith three.js on windows.
It is like below:
See! There are many holes. These holes are triangles that have opposite normal vectors.
What I need is flipping those normal vectors that are opposite than others.
This way I believe I would get clean mesh image as shown below:
How can I do this?
Do I work with three.js?
Had I better work with pcl library? - the triangluation?
This is the html I tested:
<!DOCTYPE html>
<html lang="en">
<head>
<!--title>four.js webgl - loaders - vtk loader</title-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script type="module">
var console = (window.console = window.console || {});
import * as THREE from '../build/three.module.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { VTKLoader } from './jsm/loaders/VTKLoader.js';
import { VertexNormalsHelper } from './jsm/helpers/VertexNormalsHelper.js';
let container, camera, controls, scene, renderer, vnh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10);
camera.position.set( -1, 0, 0 );
scene = new THREE.Scene();
scene.add( camera );
// light
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
dirLight.position.set( 2, 2, 2 );
scene.add( dirLight );
const material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
const loader = new VTKLoader();
loader.load( "models/vtk/point_cloud_mesh.vtk", function ( geometry )
//loader.load( "models/vtk/point_cloud_mesh_not_smoothed.vtk", function ( geometry )
{
//geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, -1,-1));
//geometry.computeFaceNormals();
//var tmp;
//console.log(geometry.index.count);
//console.log(geometry.userData);
geometry.computeVertexNormals();
const mesh = new THREE.Mesh( geometry, material );
mesh.position.set( - 0.075, 0.005, 0 );
mesh.scale.multiplyScalar( 0.2 );
scene.add( mesh );
//vnh = new VertexNormalsHelper(mesh, 0.001, 0x00ff00, 1);
//scene.add( vnh );
} );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
// controls
controls = new TrackballControls( camera, renderer.domElement );
controls.minDistance = .1;
controls.maxDistance = 0.5;
controls.rotateSpeed = 5.0;
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
//if (vnh) vnh.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>
Thanks to WestLangley , I finally got a expected result as shown below:
Thank you WestLangley and Stackoverflow!!
But the question still remains. WestLangley's suggestion helps but it wouldn't be the only one solution. As you see below, some of the normal vectors are facing into the body of my hand. I believe there would be a way to make all the normal vectors face out of the body of my hand. Answers to this question still wanted...
hey guys i am new to three.js and i am trying to change my texture using Meshmatcap material. however, i am facing an issue where i change the texture, my model texture and color would disappear after adding skinning: true , which is necessary for my model to retain size . is there any way to solve this issue? thanks in advance. currently using the model from https://sketchfab.com/3d-models/tyrannosaurus-rex-9d3a3e42c0054c35aa39c3ee07388d16
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three#0.114/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three#0.114/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three#0.114/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/three#0.114/examples/jsm/loaders/RGBELoader.js';
var container, controls;
var camera, scene, renderer, mixer, clock;
var obj , material , texture , mesh
init();
animate();
function init() {
container = document.getElementById( 'test' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.x = 0
camera.position.y = 2
camera.position.z = 10
scene = new THREE.Scene();
// scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff,0x000000,10);
scene.add(light);
clock = new THREE.Clock();
var loader = new GLTFLoader();
// Load a glTF resource
loader.load('scene.gltf', function ( gltf ) {
var textureLoader = new THREE.TextureLoader();
mesh = gltf.scene.children[0]
console.log(mesh)
var texture = textureLoader.load('blue1.jpg');
// texture.minFilter = THREE.LinearFilter;
var matcapMaterial = new THREE.MeshMatcapMaterial({ skinning: true ,normalMap: texture })
obj = scene.add( mesh );
obj.traverse((o) => {
if (o.isMesh) o.material = matcapMaterial
;
})
;
mixer = new THREE.AnimationMixer( mesh );
gltf.animations.forEach( ( clip ) => {
mixer.clipAction( clip ).play();
} );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.8;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
var delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
}
</script>
<div id="test">
</div>
</body>
</html>
When replacing textures of glTF asset with manually loaded textures, you have to set the Texture.flipY property to false in order to accommodate the uv convention of glTF.
This circumstance is also mentioned in the documentation page of THREE.GLTFLoader.
I have rendered a simple cube in Three.JS to the screen, now the way I have found online is that I need to use PointerLockControls.js lock the mouse and look around the scene. I have managed to look the cursor and hide it using this, however I am unsure how I go about implementing "look around"
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="javascript/three.js"></script>
<script src="javascript/PointerLockControls.js"></script>
<script>
var scene, camera, renderer, geometry, material, cube;
var init = function(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
geometry = new THREE.BoxGeometry();
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
document.addEventListener("mousedown", doMouseDown, false);
//const controls = new PointerLockControls( camera, document.body);
controls = new THREE.PointerLockControls( camera, document.body );
}
function doMouseDown(event){
controls.lock();
}
function render() {
renderer.render( scene, camera );
};
init();
render();
</script>
</body>
</html>
By "looking around", I assume you want to move the camera around?
This may be a start for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
#js3canvas { width:800px; height:600px; }
</style>
</head>
<body>
<canvas id="js3canvas"></canvas>
<script src="javascript/three.js"></script>
<script>
var scene, camera, renderer, geometry, material, cube;
var canvaselt = document.getElementById("js3canvas");
var init = function(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, canvaselt.clientWidth/canvaselt.clientHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer( { canvas:canvaselt } );
renderer.setSize(canvaselt.clientWidth, canvaselt.clientHeight);
geometry = new THREE.BoxGeometry();
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
canvaselt.addEventListener("mousemove", doMouseMove, false);
}
function doMouseMove(ev) { // point camera
camera.lookAt((ev.pageX-400)/100, -(ev.pageY-300)/100, 0);
}
function animate() { // need to animate, not just render once
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
init();
animate();
</script>
</body>
</html>
I am trying to change the color of 3D object where intersected using color picker.I am trying with dat.gui.I want to change the color of 3d part where it gets clicked and change the selected from the colorPicker.I tried out some possible ways but it doesn't work out.Please,refer to the code I tried out. Help me out with some solution and draw my attention to where I am getting wrong. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>color</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="Detector.js"></script>
<script src="stats.min.js"></script>
<script src="loaders/MTLLoader.js"></script>
<script src="loaders/OBJLoader.js"></script>
<script type='text/javascript' src='DAT.GUI.min.js'></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer,effectController;
var raycaster;
var objects = [];
var selectedObject,selectedPos;
var rotation;
var pos,quat;
var INTERSECTED;
var guiColor;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 15;
controls = new THREE.OrbitControls( camera );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x555000 );
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 mtlLoader = new THREE.MTLLoader(); mtlLoader.setBaseUrl('assets/'); mtlLoader.setPath('assets/'); mtlLoader.load('anno.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('assets/');
objLoader.load('anno.obj', function (object) {
scene.add( object );
objects.push( object );
});
});
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
/* Controls */
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
raycaster = new THREE.Raycaster();
gui = new dat.GUI();
parameters =
{
color: "#ff0000",
};
gui.add( parameters, 'reset' ).name("Reset");
guiColor = gui.addColor( parameters, 'color' ).name('Color');
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
renderer.domElement.addEventListener("click", onclick, false);
}
var mouse = new THREE.Vector2();
function onclick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects, true);
if (intersects.length > 0) {
INTERSECTED = intersects[0].object;
if ( INTERSECTED && INTERSECTED.material.emissive != null ){
guiColor.onChange(function(){
INTERSECTED.material.emissive.setHex(parameters.color)
});
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
stats.update();
}
</script>
</body>
</html>
I've create a little live demo with your code and a basic working solution. I'd like to highlight three important changes:
You can use the onChange() event handler in order to know when a certain dat.gui property has changed. The demo uses this feature to update the color of a selected object.
I have refactored your raycasting logic into something more simple. I've seen you've copied some code from the official three.js examples but the new code should be sufficient for your case. Besides, it's also better to update Material.color instead of Material.emissive.
If you set OrbitControls.enableDamping to true, you have to update the controls in your animation loop.
https://jsfiddle.net/btuzd23o/2/
three.js R103
I have two cubes of .obj file.The obj file is render on the browser. I want to do is as the user click on any of the cube or anywhere on the cube one prompt box display to add annotation to that place on the cube.How to do this? I am new to three.js. Anyone can help me out?
Here is my code with.obj file
<!DOCTYPE html>
<html>
<head>
<title>Mouse Picking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="three.js"></script>
<script src="Detector.js"></script>
<script src="OrbitControls.js"></script>
<script src="OBJLoader.js"></script>
<script src="MTLLoader.js"></script>
<script src="DragControls.js"></script>
<style>
body {
overflow: hidden;
margin: 0;
padding: 0;
background: hsl(0, 0%, 10%);
}
</style>
</head>
<body>
<script>
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
var container;
var camera, controls, scene, renderer;
var lighting, ambient, keyLight, fillLight, backLight;
var BlueCube, RedCube;
var objects = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
/* Camera */
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = 5;
camera.position.y = 3;
camera.position.z = 7;
/* Scene */
scene = new THREE.Scene();
lighting = true;
ambient = new THREE.AmbientLight(0xffffff, 2.5);
scene.add(ambient);
keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);
fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);
backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
/* Model */
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl('assets/');
mtlLoader.setPath('assets/');
mtlLoader.load('mouse_picking.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('assets/');
objLoader.load('mouse_picking.obj', function (object) {
scene.add( object );
objects.push( object );
});
});
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
/* Renderer */
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));
container.appendChild(renderer.domElement);
/* Controls */
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
/* Events */
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//selected();
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
I recommend that you subdivide the geometry of the cube mesh, and then use raycasting to determine the part of the scene (specifically, the triangle in the mesh) that was clicked. Then you could add a sprite object, which is a plane that always faces the camera, to display some text.
For more information, check out the collection of examples at http://stemkoski.github.io/Three.js/index.html - they are a little outdated, but the examples "Mouse Click" and "Sprite Text Labels" might help you to get started.