The g.png success loaded,but it not render.
Is it not loaded but render first?
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") });
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
Full code
https://gist.github.com/EasonWang01/410046ababc1af4f7f2db4b294b591ca
I write a sample based on your code, hope that will help you.
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"> </script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry1 = new THREE.BoxGeometry( 12, 1, 1 );
var material1 = new THREE.MeshBasicMaterial( { color: 0x00FFCC } );
var cube1 = new THREE.Mesh( geometry1, material1 );
scene.add( cube1 );
var geometry2 = new THREE.BoxGeometry( 10, 1, 1 );
var material2 = new THREE.MeshBasicMaterial( { color: 0xCCFF33 } );
var cube2 = new THREE.Mesh( geometry2, material2 );
scene.add( cube2 );
var geometry3 = new THREE.CircleBufferGeometry( 3, 32 );
var material3 = new THREE.MeshBasicMaterial( { color: 0xCCFFCC } );
var circle3 = new THREE.Mesh( geometry3, material3 );
scene.add( circle3 );
var geometry4 = new THREE.BoxBufferGeometry( 10, 1, 1 );
material4 = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") });
var cube4 = new THREE.Mesh( geometry4, material4 );
scene.add( cube4 );
var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
var materials = [];
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
cube.position.y = 150;
scene.add(cube);
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
camera.position.z = 5;
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("img/g.png") });
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube1.rotation.x += 0.02;
cube1.rotation.y += 0.02;
cube2.rotation.x += 0.03;
cube2.rotation.y += 0.03;
renderer.render(scene, camera);
};
setTimeout(() => {render();},500)
</script>
</body>
</html>
Related
I am trying to make a hole in a solid object(box) using stencil method in ThreeJS. I found few web pages and similar questions on the net in this regard but couldn't work them out. Specifically This link is what I want to achieve(even one hole is enough). However the code in the link is using Babylon and I need it to be in ThreeJS. Any idea how I can use ThreeJS to achieve this(or to translate it to ThreeJS)?
Update 1:
There is a sample in ThreeJS examples "misc_exporter_ply.html"(it's got nothing to do with stencil buffer though) and so I tried to use it as it has a simple scene with only one box. I added another cylinder inside the box to represent the hole.
I could get it to work so that there is a visible hole. Yet it's not perfect as the stencil buffer is not working as expected:
Image 1
Image 2
And here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - exporter - ply</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>
<div id="info">
three.js webgl - exporter - ply<br/><br/>
<button id="exportASCII">export ASCII</button> <button id="exportBinaryBigEndian">export binary (Big Endian)</button> <button id="exportBinaryLittleEndian">export binary (Little Endian)</button>
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { PLYExporter } from './jsm/exporters/PLYExporter.js';
let scene, camera, renderer, exporter, mesh, meshHole, mesh0, mesh1;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa1caf1 );
//scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
//exporter = new PLYExporter();
//
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 200, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
directionalLight.shadow.camera.bottom = - 100;
directionalLight.shadow.camera.left = - 120;
directionalLight.shadow.camera.right = 120;
scene.add( directionalLight );
// ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// mesh
const boxHole = new THREE.CylinderGeometry( 15, 15, 65, 32, 32 );//BoxGeometry( 20, 20, 51 );
let matHole = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
matHole.colorWrite = false;
meshHole = new THREE.Mesh( boxHole, matHole );
meshHole.castShadow = true;
meshHole.position.y = 50;
meshHole.rotation.x = Math.PI / 2;
scene.add( meshHole );
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ color: 0xaaaaaa }) );
mesh.castShadow = true;
mesh.position.y = 50;
scene.add( mesh );
// back faces
const mat0 = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
mat0.side = THREE.FrontSide;
mat0.depthWrite = false;
mat0.depthTest = false;
mat0.colorWrite = false;
//mat0.stencilWrite = true;
mat0.stencilFunc = THREE.AlwaysStencilFunc;
mat0.stencilFail = THREE.KeepStencilOp;
//mat0.stencilZFail = THREE.IncrementWrapStencilOp;
//mat0.stencilZPass = THREE.ReplaceStencilOp;
mat0.stencilRef = 1;
const boxHole0 = new THREE.CylinderGeometry( 15, 15, 65, 32, 32 );
mesh0 = new THREE.Mesh( boxHole0, mat0 );
mesh0.rotation.x = Math.PI / 2;
mesh0.castShadow = true;
mesh0.position.y = 50;
scene.add( mesh0 );
// front faces
const mat1 = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
mat1.side = THREE.DoubleSide;
//mat1.depthWrite = false;
//mat1.depthTest = true;
//mat1.colorWrite = false;
//mat1.stencilWrite = true;
mat1.depthFunc=THREE.AlwaysDepth;
mat1.stencilFunc = THREE.EqualStencilFunc;
mat1.stencilFail = THREE.IncrementStencilOp;
//mat1.stencilZFail = THREE.DecrementWrapStencilOp;
//mat1.stencilZPass = THREE.DecrementWrapStencilOp;
mat1.stencilRef = 1;
const boxHole1 = new THREE.CylinderGeometry( 15, 15, 65, 32, 32, true );
mesh1 = new THREE.Mesh( boxHole1, mat1 );
mesh1.rotation.x = Math.PI / 2;
mesh1.castShadow = true;
mesh1.position.z = 0;
mesh1.position.y = 50;
scene.add( mesh1 );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
//
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.update();
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
const link = document.createElement( 'a' );
link.style.display = 'none';
document.body.appendChild( link );
</script>
</body>
</html>
Got it working at the end:
Box with cylinder hole
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { PLYExporter } from './jsm/exporters/PLYExporter.js';
let scene, camera, renderer, exporter, mesh, meshHole, mesh0, mesh1;
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa1caf1 );
//scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
//exporter = new PLYExporter();
//
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 200, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
directionalLight.shadow.camera.bottom = - 100;
directionalLight.shadow.camera.left = - 120;
directionalLight.shadow.camera.right = 120;
scene.add( directionalLight );
// ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// mesh
const boxHole = new THREE.CylinderGeometry( 15, 15, 51, 32, 32 );//BoxGeometry( 20, 20, 51 );
let matHole = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
matHole.colorWrite = false;
meshHole = new THREE.Mesh( boxHole, matHole );
meshHole.castShadow = true;
meshHole.position.y = 50;
meshHole.rotation.x = Math.PI / 2;
scene.add( meshHole );
const geometry = new THREE.BoxGeometry( 50, 50, 50 );
mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ color: 0xaaaaaa }) );
mesh.castShadow = true;
mesh.position.y = 50;
scene.add( mesh );
// front faces
const mat0 = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
mat0.side = THREE.FrontSide;
//mat0.depthWrite = false;
//mat0.depthTest = false;
mat0.colorWrite = false;
const boxHole0 = new THREE.CylinderGeometry( 15, 15, 51, 32, 32 );
mesh0 = new THREE.Mesh( boxHole0, mat0 );
mesh0.rotation.x = Math.PI / 2;
mesh0.castShadow = true;
mesh0.position.y = 50;
scene.add( mesh0 );
mat0.stencilWrite = true;
mat0.stencilFunc = THREE.AlwaysStencilFunc;
mat0.stencilFail = THREE.KeepStencilOp;
mat0.stencilZFail = THREE.KeepStencilOp;
mat0.stencilZPass = THREE.ReplaceStencilOp;
mat0.stencilRef = 1;
// back faces
const mat1 = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
mat1.side = THREE.BackSide;
mat1.depthWrite = false;
mat1.depthTest = true;
//mat1.colorWrite = false;
const boxHole1 = new THREE.CylinderGeometry( 15, 15, 51, 32, 32, true );
mesh1 = new THREE.Mesh( boxHole1, mat1 );
mesh1.rotation.x = Math.PI / 2;
mesh1.castShadow = true;
mesh1.position.z = 0;
mesh1.position.y = 50;
scene.add( mesh1 );
mat1.depthFunc=THREE.AlwaysDepth;
mat1.stencilWrite = true;
mat1.stencilFunc = THREE.EqualStencilFunc;
mat1.stencilFail = THREE.DecrementWrapStencilOp;
mat1.stencilZFail = THREE.DecrementWrapStencilOp;
mat1.stencilZPass = THREE.DecrementWrapStencilOp;
mat1.stencilRef = 1;
mesh1.onAfterRender = function ( renderer ) {
renderer.clearStencil();
};
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
//
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.update();
//
window.addEventListener( 'resize', onWindowResize );
}
I am trying to render some text onto a "fake 3D" backdrop (see my image link for a picture of what it looks like rendered), however when I rotate the text on the Z-axis to make the text look like it's a part of the fake 3D backdrop the text becomes distorted, almost looking italicized. I've tried rotation on the x and y axis as well to maybe change the depth perception but I can't get it to look right.
Anyone run into this or have thoughts?
Image:
Code:
var desiredWidthInCSSPixels = 1100;
var desiredHeightInCSSPixels = 700;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var texture_loader = new THREE.TextureLoader();
var font_loader = new THREE.FontLoader();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer.setSize( desiredWidthInCSSPixels, desiredHeightInCSSPixels );
document.body.appendChild( renderer.domElement );
//this is the fake 3d backdrop "business cards"
texture_loader.load( "assets/images/mockups/mockup-1.png", function (texture) {
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.BoxGeometry( 800, 600, 0 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
});
//here's the company's logo
texture_loader.load( "assets/images/logo.svg", function (texture) {
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.BoxGeometry( 60, 60, 0 );
var material = new THREE.MeshBasicMaterial( { transparent: true, map: texture } );
var cube = new THREE.Mesh( geometry, [null, null, null, null, material, null] );
cube.rotation.z = -150.12;
cube.position.x = 60;
cube.position.y = -40;
scene.add( cube );
});
//the text loader that looks italicized
font_loader.load( 'assets/fonts/roboto_black_regular.json', function(font) {
var geometry = new THREE.TextGeometry( 'My test text looks italic!!!', {
font: font,
size: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 3,
bevelSize: 8,
bevelSegments: 5
} );
var material = new THREE.MeshPhongMaterial({
color: 0xddd
});
var cube = new THREE.Mesh( geometry, [material, null, null, null, null, null] );
cube.position.x = 60;
cube.position.y = -40;
cube.position.z = 20;
cube.rotation.x = .12;
cube.rotation.z = -149.95;
scene.add( cube );
});
camera.position.z = 200;
var animate = function () {
requestAnimationFrame( animate );
renderer.render(scene, camera);
};
animate();
function xtest() {
cube.rotation.x += .01;
console.log(cube.rotation.x);
}
function ytest() {
cube.rotation.y += .01;
console.log(cube.rotation.y);
}
function ztest() {
cube.rotation.z += .01;
console.log(cube.rotation.z);
}
function x1test() {
cube.rotation.x -= .01;
console.log(cube.rotation.x);
}
function y1test() {
cube.rotation.y -= .01;
console.log(cube.rotation.y);
}
function z1test() {
cube.rotation.z -= .01;
console.log(cube.rotation.z);
}
How can i draw object axes. I am refering at the mesh local axes and not the world axes. I know that using:
function drawlines(){
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( 100, 0, 0 ),
new THREE.Vector3( 0, 0, 0 )
);
var line = new THREE.Line( geometry, material );
scene.add( line );
var material = new THREE.LineBasicMaterial({
color: 0x00ff00
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( 0, 100, 0 ),
new THREE.Vector3( 0, 0, 0 )
);
var line = new THREE.Line( geometry, material );
scene.add( line );
var material = new THREE.LineBasicMaterial({
color: 0xff0000
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( 0, 0, 100 ),
new THREE.Vector3( 0, 0, 0 )
);
var line = new THREE.Line( geometry, material );
scene.add( line );
}
draws lines at XYZ respectively. What i need is to draw the XYZ axis of the model. How can i do that. I load the model with this code
var loader = new THREE.JSONLoader();
loader.load( "https://threejs.org/examples/models/animated/horse.js", function ( geometry ) {
var material = new THREE.MeshLambertMaterial( {
vertexColors: THREE.FaceColors,
morphTargets: true,
overdraw: 0.5
} );
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( 1.5, 1.5, 1.5 );
scene.add( mesh );
mixer = new THREE.AnimationMixer( mesh );
var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
mixer.clipAction( clip ).setDuration( 1 ).play();
} );
If I get you correctly, you can use THREE.AxisHelper(). Just create an instance of it and then add it to your model.
jsfiddle example.
var camera, scene, renderer, controls;
var sphere, cube;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 5, 1.5).setLength(100);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//renderer.setClearColor(0xcccccc);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var plane = new THREE.GridHelper(100, 10);
scene.add(plane);
sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 16, 8), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
sphere.position.set(-20, 0, 0);
cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "green", wireframe: true}));
cube.position.set(20, 0, 0);
var worldAxis = new THREE.AxesHelper(20);
scene.add(worldAxis);
scene.add(sphere);
scene.add(cube);
var sphereAxis = new THREE.AxesHelper(20);
sphere.add(sphereAxis);
var cubeAxis = new THREE.AxesHelper(20);
cube.add(cubeAxis);
}
var delta;
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
I am trying to load a ctm model in my scene but I have the following error :
geometry.computeOffsets is not a function
I have divided my code in 2 files : 1 html file and 1 js file that contain the code to create the scene and load the ctm model.
My html file is as below:
<!DOCTYPE html>
<head>
<title>Basic template</title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="../lib/three.min.js"></script>
<script src="../lib/Detector.js"></script>
<script src="../lib/Coordinates.js"></script>
<script src="../lib/OrbitAndPanControls.js"></script>
<script src="../lib/TrackballControls.js"></script>
<script src="../lib/stats.min.js"></script>
<script src="js/loaders/ctm/lzma.js"></script>
<script src="js/loaders/ctm/ctm.js"></script>
<script src="js/loaders/ctm/CTMLoader.js"></script>
</head>
<body>
<script src="js/loaders/ctm/ctm_loader_house.js"></script>
</body>
And my javascriptfile ctm_loader_house.js:
var camera, scene,s, renderer;
var cameraControls;
var clock = new THREE.Clock();
// LOADER
function callbackModel( geometry, s, material, x, y, z, rx, ry ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( x, y, z );
mesh.scale.set( s, s, s );
mesh.rotation.x = rx;
mesh.rotation.z = ry;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
}
function init() {
// SCENE
scene = new THREE.Scene();
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
scene.add( light );
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( -400, 200, -300 );
scene.add( light );
//CAMERA
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 800;
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( canvasWidth, canvasHeight );
document.body.appendChild( renderer.domElement );
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set( 0, 0, 0 );
// LOADER
function checkTime() {
var c = 0,
var s = Date.now();
c ++;s= Date.now();
if ( c === 3 ) {
var e = Date.now();
console.log( "Total parse time: " + (e-s) + " ms" );
}
}
var loader = new THREE.CTMLoader();
loader.load( "models/ctm/ModernGlass-House_simplify.ctm", function( geometry ) {
var material1 = new THREE.MeshLambertMaterial( { color: 0xffffff } );
//callbackModel( geometry, scale , material, position x,position y,position z, rotation x, rotation y )
callbackModel( geometry, 0.1, material1, 0, 0, 0, -1.57, 1.57 );
checkTime();
}, { useWorker: true } );
//AXIS
Coordinates.drawGround({size:10000});
Coordinates.drawGrid({size:1000,scale:0.01});
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}
function render() {
var delta = clock.getDelta();
requestAnimationFrame(render);
cameraControls.update(delta);
renderer.render(scene, camera);
}
init();
render();
Any help is much appreciated.
Thanks #WestLangley, I got it working. Here is the code.
var camera, scene,s, controls, renderer;
var cameraControls;
var clock = new THREE.Clock();
function callbackModel( geometry, s, material, x, y, z, rx, ry ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( x, y, z );
mesh.scale.set( s, s, s );
mesh.rotation.x = rx;
mesh.rotation.z = ry;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
}
function init() {
// SCENE
scene = new THREE.Scene();
// LIGHTS
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
scene.add( light );
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( -400, 200, -300 );
scene.add( light );
//CAMERA
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 800;
controls = new THREE.OrbitControls( camera );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( canvasWidth, canvasHeight );
document.body.appendChild( renderer.domElement );
// LOADER
var c = 0, s = Date.now();
function checkTime() {
c ++;s= Date.now();
if ( c === 3 ) {
var e = Date.now();
console.log( "Total parse time: " + (e-s) + " ms" );
}
}
var loader = new THREE.CTMLoader();
loader.load( "models/ctm/ModernGlass-House_simplify.ctm", function( geometry ) {
var material1 = new THREE.MeshLambertMaterial( { color: 0xffffff } );
//callbackModel( geometry, scale , material, position x,position y,position z, rotation x, rotation y )
callbackModel( geometry, 0.1, material1, 0, 0, 0, -1.57, 1.57 );
checkTime();
}, { useWorker: true } );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
renderer.render( scene, camera );
}
init();
animate();
by trying a tutorial ( http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/ ) the needed texture is not loading.
Here is my trying code in the index.html script area
<script src="js/jquery.js"></script>
<script src="js/threejs/build/three.js"></script>
<script>
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 1.5;
var texture = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');
texture.anisotropy = 16;
var material = new THREE.MeshPhongMaterial( { map: texture } );
/*material.bumpMap = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');
material.bumpScale = 0.05;*/
var scene = new THREE.Scene();
var light = new THREE.AmbientLight(0x888888);
scene.add(light);
var light = new THREE.DirectionalLight( 0xCCCCCC, 1 );
light.position.set(5,3,5);
scene.add(light);
var earthMesh = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material);
scene.add(earthMesh);
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
var $container = $('#container');
$container.append(renderer.domElement);
renderer.render(scene, camera);
</script>
so what I'm doing wrong here???
thanks for your help in advance
best regards
Karsten
try this..
var tUrl = "images/earthbump1k.jpg";
var texture = THREE.ImageUtils.loadTexture(tUrl, {}, createMesh);
function createMesh(texture){
var material = new THREE.MeshPhongMaterial( { map: texture } );
var earthMesh = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material);
scene.add(earthMesh);
}