I'm sorry to ask such a basic question about three, but I can't see what I'm missing. I'm trying to make a torus cast a shadow on a plane, but the shadow isn't appearing.
Can anyone see what I'm missing? Any pointers would be greatly appreciated!
// generate a scene object
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);
// generate a camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
camera.position.set(0, 1, -150);
// generate a renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio); // <3 retina
renderer.setSize(window.innerWidth, window.innerHeight); // canvas size
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// generate controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);
// generate some lights
var ambientLight = new THREE.AmbientLight(0xeeeeee);
scene.add(ambientLight);
// create light that casts shadows
var light = new THREE.PointLight(0xffffff);
light.position.set(0, 0, -100);
light.castShadow = true;
scene.add(light);
// render loop
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
};
// draw some geometries
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
torus.position.set(0, 0, -10);
torus.castShadow = true;
scene.add( torus );
var geometry = new THREE.PlaneGeometry( 200, 200, 32 );
var material = new THREE.MeshBasicMaterial(
{color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
plane.receiveShadow = true;
scene.add( plane );
render();
html, body { width: 100%; height: 100%; background: #000; }
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script>
<script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>
</body>
MeshBasicMaterial doesn't react to light. Any color you assign to it basically behaves as an emissive color. Maybe you meant to use MeshStandardMaterial?
// generate a scene object
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);
// generate a camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
camera.position.set(0, 1, -150);
// generate a renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio); // <3 retina
renderer.setSize(window.innerWidth, window.innerHeight); // canvas size
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// generate controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);
// generate some lights
var ambientLight = new THREE.AmbientLight(0xeeeeee);
// scene.add(ambientLight);
// create light that casts shadows
var light = new THREE.PointLight(0xffffff);
light.position.set(0, 0, -100);
light.castShadow = true;
scene.add(light);
// render loop
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
};
// draw some geometries
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
torus.position.set(0, 0, -10);
torus.castShadow = true;
scene.add( torus );
var geometry = new THREE.PlaneGeometry( 200, 200, 32 );
var material = new THREE.MeshStandardMaterial(
{color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
plane.receiveShadow = true;
scene.add( plane );
render();
html, body { width: 100%; height: 100%; background: #000; }
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script>
<script src='https://threejs.org/examples/js/controls/TrackballControls.js'></script>
</body>
Related
I am trying to generate a 3d graph using three.js
Code:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three#0.119.0/build/three.min.js"></script>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var node1_geometry = new THREE.BoxGeometry( 1, 1, 1 );
var node1_material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var node1 = new THREE.Mesh( node1_geometry, node1_material );
node1.position.set(-2, 4, 1);
var node2_geometry = new THREE.BoxGeometry( 1, 1, 1 );
var node2_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var node2 = new THREE.Mesh( node2_geometry, node2_material );
node2.position.set(2, 4, 1);
var edge_geometry = new THREE.Geometry();
edge_geometry.vertices.push( node1.position, node2.position );
var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var edge = new THREE.Line( edge_geometry, edge_material );
scene.add( node1 );
scene.add( node2 );
scene.add( edge );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
But this only gives a black window and the graph is not displayed.
Suggestions on how to fix this will be really helpful.
To get the snippet to run you have a small problem with you line
var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
You can change this to:
var edge_material = new THREE.LineDashedMaterial({
color: 0xffffff,
dashSize: 2,
gapSize: 2
});
It should now render, but a black background still shows up. The problem now is that your camera is not angled at the content you have created, so add a line with a camera position below.
camera.position.y = 5;
Now you should be able to see your two boxes, and the line.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.background = new THREE.Color(0x333333);
var node1_geometry = new THREE.BoxGeometry(1, 1, 1);
var node1_material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var node1 = new THREE.Mesh(node1_geometry, node1_material);
node1.position.set(-2, 4, 1);
var node2_geometry = new THREE.BoxGeometry(1, 1, 1);
var node2_material = new THREE.MeshBasicMaterial({
color: 0xff00ff
});
var node2 = new THREE.Mesh(node2_geometry, node2_material);
node2.position.set(2, 4, 1);
var edge_geometry = new THREE.Geometry();
edge_geometry.vertices.push(node1.position, node2.position);
var edge_material = new THREE.LineDashedMaterial({
color: 0xffffff,
dashSize: 2,
gapSize: 2
});
var edge = new THREE.Line(edge_geometry, edge_material);
scene.add(node1);
scene.add(node2);
scene.add(edge);
camera.position.z = 5;
camera.position.y = 5;
var animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three#0.119.0/build/three.min.js"></script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
I'm still struggling with getting spotLight to stick to the camera. I can see the light but looks like it stays at one place (?).
See the video for reference
//Camera
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 1, 0 );
//spotLight attached to camera
spotlight = new THREE.SpotLight( 0xffffff, 55 );
spotlight.angle = 0.20*(Math.PI / 3);
spotlight.penumbra = 0.1;
spotlight.decay = 2;
spotlight.distance = 200;
camera.add( spotlight);
camera.add( spotlight.target );
spotlight.target.position.set( 0, 0, 1 );
spotlight.target=camera;
spotlight.position.copy( camera.position );
controls = new PointerLockControls( camera, document.body );
//adding first person camera from PointerLockControls
scene.add( controls.getObject() );
I also tried grouping camera and spotlight:
const group = new THREE.Group();
group.add(camera);
group.add(spotlight);
spotlight.target=camera;
spotlight.position.copy( camera.position );
controls = new PointerLockControls( group, document.body );
but that did not work either. What should I change? What's missing here?
//edit this is what my current code looks like
import * as THREE from "../node_modules/three/build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
let renderer, scene, camera, gui;
let spotlight, lightHelper;
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0,0,1);
const boxgeometry = new THREE.BoxGeometry( 25, 25, 25 );
const boxmaterial = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( boxgeometry, boxmaterial );
scene.add( cube );
cube.position.set(-20,0,1);
const ambient = new THREE.AmbientLight( 0xffffff, 0.2 );
scene.add(ambient);
**scene.add(camera);
spotlight = new THREE.SpotLight(0xffffff, 55, 80, 0.8*Math.PI);
camera.add(spotlight);
camera.add(spotlight.target);**
let material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
let geometry = new THREE.PlaneGeometry( 2000, 2000 );
let floor= new THREE.Mesh( geometry, material );
floor.position.set( 0, - 1, 0 );
floor.rotation.x = - Math.PI * 0.5;
floor.receiveShadow = true;
scene.add(floor);
render();
window.addEventListener( 'resize', onWindowResize );
}
function animate()
{
requestAnimationFrame( animate );
camera.rotation.y+=0.01;
renderer.render( scene, camera );
}
animate();
The setup should look like so:
let camera, scene, renderer;
init();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
scene.add(camera);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);
const spotLight = new THREE.SpotLight(0xffffff, 0.6, 0, Math.PI * 0.05);
camera.add(spotLight);
const geometry = new THREE.PlaneGeometry();
const material = new THREE.MeshPhongMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);
}
function animation(time) {
const t = time * 0.001;
camera.position.x = Math.sin(t) * 0.25;
camera.position.y = Math.cos(t) * 0.25;
renderer.render(scene, camera);
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.134.0/build/three.min.js"></script>
It's important to add the spot light as a child to the camera and the camera itself to the scene.
I'm new with three.js and I need to create a "room" with doors and windows. This is a simple task but I have found only not up to date answers.
Similar questions are here:
- subtracting-geometry-in-three-js
- is-it-possible-to-cut-parts-of-the-shape-geometry-away-in-three-js
In my case, I have a big box and I want to subtract a smaller one JSFIDDLE example:
var material = new THREE.MeshBasicMaterial({color: 0xffff00});
var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );
var faceMaterial = new THREE.MeshLambertMaterial( { color: 0x0087E6 } );
var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var faceMaterial_Y = new THREE.MeshLambertMaterial( { color: 0xffff00 } );
var cube_Y = new THREE.Mesh( geometry_Y, faceMaterial_Y);
scene.add(cube_Y);
var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var faceMaterial_A = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var cubeA = new THREE.Mesh( geometry_A, material );
cubeA.position.set( 0.5, 0.5, 0 );
// HOW TO SUBTRACT cube_Y - cubeA?
//create a group and add the three cubes
var group = new THREE.Group();
group.add( cubeA );
group.add( cube_Y );
scene.add( group );
Thanks for helping me!
An option is to use ThreeCSG / ThreeBSP to subtract geometries.
Create ThreeBSP objects form the cube geometries:
var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
geometry_A.translate( 0.5, 0.5, 0 );
var bsp_A = new ThreeBSP(geometry_A);
var bsp_Y = new ThreeBSP(geometry_Y);
Subtract the geometry and create a Mesh:
var bsp_YsubA = bsp_Y.subtract(bsp_A);
var bsp_mesh = bsp_YsubA.toMesh();
bsp_mesh.material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
scene.add( bsp_mesh );
See the example:
(function onLoad() {
var container, camera, scene, renderer, controls;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(3, 1, -1);
scene.add(camera);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = 4;
directionalLight.position.y = 1;
directionalLight.position.z = -2;
scene.add( directionalLight );
controls = new THREE.OrbitControls(camera, renderer.domElement);
addGridHelper();
createModel();
}
function createModel() {
var geometry_Y = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.99 );
var geometry_A = new THREE.BoxBufferGeometry( 0.7, 0.7, 0.7 );
geometry_A.translate( 0.5, 0.5, 0 );
var bsp_A = new ThreeBSP(geometry_A);
var bsp_Y = new ThreeBSP(geometry_Y);
var bsp_YsubA = bsp_Y.subtract(bsp_A);
var bsp_mesh = bsp_YsubA.toMesh();
bsp_mesh.material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
scene.add( bsp_mesh );
}
function addGridHelper() {
var helper = new THREE.GridHelper(10, 10);
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
var axis = new THREE.AxesHelper(100);
scene.add(axis);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<!--script src="https://threejs.org/build/three.js"></!--script-->
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r124/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/Wilt/ThreeCSG/develop/ThreeCSG.js"></script>
<div id="container"></div>
See also
Unexpected result using ThreeCSG
After using the threeBSP method, the created spheres are not smooth
https://github.com/manthrax/THREE-CSGMesh
You could try my CSG library. It is more robust than the other threejs csg solutions.
I want to set the HTML background as clearColor in three.js?
This is my three.js code:
// init
var vWebGL = new WEBGL();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00fdf0 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
renderer.clearColor(0x000000, 0.0);
// Render Loop
function animate() {
renderer.setClearAlpha(0.0);
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
if (vWebGL.isWebGLAvailable()) {
// Initiate function or other initializations here
animate();
} else {
var warning = vWebGL.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
In My Webgl I can specify the HTML as clearColor.
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
My Webgl:
or
The background of a THREE.Scene can be set by setting the property .background:
e.g.
scene = new THREE.Scene();
scene.background = new THREE.Color(0xff0000); // red
If you want to have a transparent background, then the THREE.WebGLRenderer has to be initialized with the property {alpha: true}. The clear color and alpha channel have to be set 0, but this is default:
e.g.
renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x000000, 0 );
See the example with a cube which is drawn over a background image:
(function onLoad() {
var container, loader, camera, scene, renderer, orbitControls;
init();
animate();
function init() {
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setClearColor( 0x000000, 0 );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 1, -2);
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
scene = new THREE.Scene();
scene.add(camera);
window.onresize = resize;
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(1,2,1.5);
scene.add( directionalLight );
orbitControls = new THREE.OrbitControls(camera);
addGridHelper();
createModel();
}
function createModel() {
var material = new THREE.MeshPhongMaterial({color:'#b090b0'});
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function addGridHelper() {
var helper = new THREE.GridHelper(100, 100);
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
var axis = new THREE.AxesHelper(1000);
scene.add(axis);
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
})();
#image-abs { position : absolute; top : 0; left : 0; z-index: -1; width: 100%; height: 100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<img id="image-abs" src="https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/background.jpg">
<div id="container"></div>
I have problem with animating object exported via blender plugin from blender to THREE.js. Animation did not start running...
Of course, I tried many combinations of settings when exporting from blender and importing to THREE.js library, but without success.
Here is code, what I think should work. Comment Critical section annotate where is probably some mistake. Link to source JSON is in the example too. Of course, I can provide source *.blend file, if needed...
var tgaLoader = new THREE.TGALoader();
var objectLoader = new THREE.ObjectLoader();
var clock = new THREE.Clock();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.getElementById('container').appendChild(renderer.domElement);
objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) {
scene = loadedScene;
mesh = scene.children[0];
scene.background = new THREE.Color('white');
mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA') });
hemiLight = new THREE.HemisphereLight('white', 'white', 0.6);
scene.add(hemiLight);
camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
camera.position.set(500, 200, -100);
controls = new THREE.OrbitControls(camera);
controls.target.set(0, 50, 0);
controls.update();
var geometry = new THREE.PlaneBufferGeometry(200, 200);
var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
var ground = new THREE.Mesh(geometry, material);
ground.rotation.x = - Math.PI / 2;
scene.add(ground);
mesh.scale.set(-1, -1, 1);
// Critical section...
mixer = new THREE.AnimationMixer(mesh);
var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true);
var animation = mixer.clipAction(sequence);
animation.play();
// End of critital section
animate();
});
window.onresize = function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
};
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = 0.75 * clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
}
body {
margin: 0px;
overflow: hidden;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>
Thanks for any suggestion.
I dug in into animation and noticed that it uses morphTargets. And then I remembered about this example. So, the key moment is to set .morphTarget parameter of a material to true, so, I've applied it to the material in your code snippet and it started to work:
mesh.material = new THREE.MeshPhongMaterial({
map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'),
morphTargets: true
});
Though, I'm not sure, if such an approach is correct, but, at least, it's working )
var tgaLoader = new THREE.TGALoader();
var objectLoader = new THREE.ObjectLoader();
var clock = new THREE.Clock();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.getElementById('container').appendChild(renderer.domElement);
objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) {
scene = loadedScene;
mesh = scene.children[0];
scene.background = new THREE.Color('white');
mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'), morphTargets: true });
hemiLight = new THREE.HemisphereLight('white', 'white', 0.6);
scene.add(hemiLight);
camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
camera.position.set(500, 200, -100);
controls = new THREE.OrbitControls(camera);
controls.target.set(0, 50, 0);
controls.update();
var geometry = new THREE.PlaneBufferGeometry(200, 200);
var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
var ground = new THREE.Mesh(geometry, material);
ground.rotation.x = - Math.PI / 2;
scene.add(ground);
mesh.scale.set(-1, -1, 1);
// Critical section...
mixer = new THREE.AnimationMixer(mesh);
var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true);
var animation = mixer.clipAction(sequence);
animation.play();
// End of critital section
animate();
});
window.onresize = function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
};
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = 0.75 * clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
}
body {
margin: 0px;
overflow: hidden;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>