I want to display different texts at different-different coordinates using three js. And I want to show the text like in the following image file at different-different location.
I want that function should display text at different-different location as like in linked image file
Javascript
var container, camera, scene, renderer, controls;
var text2;
init();
animate();
function init(){
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 1 ;
scene = new THREE.Scene();
text2 = createLabel("Tower",30,90,30,10,50,"blue","white");
text3 = createLabel("Hello",30,90,50,60,50,"black","white");
text4 = createLabel("Tower",30,90,120,100,50,"red","white");
console.log( text2 );
scene.add( text2 );
scene.add( text3 );
scene.add( text4 );
text2.lookAt( camera.position );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.append( renderer.domElement );
}
function createLabel(text, x, y, canvasPosition_x,canvasPosition_y, size, color, backGroundColor, backgroundMargin) {
var canvas = document.createElement("canvas");
// set resolution
canvas.width = 512;
canvas.height = 512;
var context = canvas.getContext("2d");
context.font = size + "pt Arial";
context.font = size + "pt Calibri";
context.fillStyle = "white";
canvas.position = "absolute";
context.fillRect( 0, 0, canvas.width, canvas.height );
context.fillStyle = color;
context.fillText( text, x, y );
context.position = "absolute";
var texture = new THREE.CanvasTexture( canvas );
var material = new THREE.MeshBasicMaterial({
map: texture,
// color: 0xff0000 // useful for debugging. in this way you see, how much are of the plane is used for the text
});
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), material);
mesh.position.x = canvasPosition_x;
mesh.position.y = canvasPosition_y;
return mesh;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
Here is link of fiddle
You can use the position-attribute of the mesh to change the location. So for instance mesh.position.x = 0.5;.
Related
I would like to select objects in ThreeJs with the mouse like when using a raycaster, but instead of having a single ray, i would like to have circular area around the mouse coordinates, and everything inside that area gets selected.
I created this snippet to visualize what I'm trying to achieve.
const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
canvas.style.position = "fixed";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
let selectionRadius = 50;
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 );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2(-1, -1);
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
raycaster.setFromCamera( pointer, camera );
const intersects = raycaster.intersectObjects( scene.children );
for ( let i = 0; i < intersects.length; i ++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
animate();
function onPointerMove( event ) {
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.strokeStyle="blue";
ctx.beginPath();
ctx.arc(event.clientX, event.clientY, selectionRadius, 0, 2*Math.PI);
ctx.stroke();
ctx.closePath();
}
window.addEventListener('pointermove', onPointerMove);
html, body {
margin: 0;
padding: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.145.0/three.min.js"></script>
As you can see, with the raycaster, I am able to select objects, but not within that radius, so how can I achieve that?
You would need to fire multiple rays... you're currently only firing one. The first argument of raycaster.setFromCamera is a vec2, you can modify this with your values circling the pointer.
As your circle appears to be a 2D element drawn on top it should be straight forward to match the radius. You could use the ctx.arc function to get your new pointer values, just update the start and end angles in a loop.
I would keep the number of rays you cast to a minimum for performance.
How to create a rectangular svg grid as textur on a three.js mesh? The mesh can have a dynamic size. I want the svg texture not to be stretched, and to keep its original size.
The result should look like on this picture]
.
Here's a jsfiddle from my current status: https://jsfiddle.net/s7vjkLon/6/
As you can see the SVG (top-left) has a size of 128px and on the mesh (bottom) the SVG is not shown in its original size. It´s stretched.
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xFFFFFF);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
scene = new THREE.Scene();
scene.add(camera);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function createGridOnMesh(options) {
var space = options.space;
var meshWidth = options.meshWidth;
var meshHeight = options.meshHeight;
var lineWidth = 2;
var canvas = document.getElementById('canvas');
canvas.width = Math.pow(2, 7);
canvas.height = Math.pow(2, 7);
var context = canvas.getContext('2d');
context.fillStyle = "rgba(0, 0, 0, 1)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgba(255, 0, 0)";
context.fillRect(Math.round(lineWidth / 2), Math.round(lineWidth / 2), canvas.width - lineWidth, canvas.height - lineWidth);
var texture = new THREE.CanvasTexture(canvas);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 2);
texture.needsUpdate = true;
geometry = new THREE.BoxBufferGeometry(meshWidth, meshHeight, 200);
material = new THREE.MeshBasicMaterial({ map: texture });
mesh = new THREE.Mesh(geometry, material);
scene.add( mesh );
}
init();
animate();
createGridOnMesh({ space: 20, meshWidth: 600, meshHeight: 200})
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<canvas id="canvas"></canvas>
Thanks in advance.
My requirement is to make a css3d rendering plane to be act as a floor. And a 3d cube should be on top of the plane. Following I have attached the code which I tried.Both plane and the cube shares the same scene and camera.But renders are different. But I couldn't place the 3d cube on top of the plane and rotation of the plane and cube are different.
<!DOCTYPE html>
<html lang="en">
<head>
<title>3JS CODE</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: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var HtmlElement = function ( id, x, y, z, rx ) {
var div = document.createElement( 'div' );
div.innerHTML = "Hello";
div.id = id; //'googleMap';
div.style.width = '1200px';
div.style.height = '950px';
div.style.backgroundColor = 'blue';
var object = new THREE.CSS3DObject( div );
object.position.set( x, y, z );
object.rotation.x = rx;
return object;
};
</script>
<script>
var container, stats;
var camera, controls, mapScene, group, renderer1,renderer2;
var objects = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 5000 );
camera.position.z = 1000;
camera.position.set(0.18348775328760136, -334.5971567493426, 800.8398185862801);
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 3.0;
controls.zoomSpeed = 2.2;
controls.panSpeed = 2.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 1.3;
mapScene = new THREE.Scene();
// scene.background = new THREE.Color( 0xf0f0f0 );
group = new THREE.Group();
var mapObject = new HtmlElement( 'googleMap', 0, 0, 240, 270 );
group.add( mapObject );
///////////////
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
var hex = Math.random() * 0xffffff;
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );
}
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
cube = new THREE.Mesh( geometry, material );
cube.position.x = 0;
cube.position.y = -300;
cube.position.z = 500;
group.add( cube );
mapScene.add( group );
// renderer
renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.top = 0;
container.appendChild( renderer1.domElement );
renderer2 = new THREE.WebGLRenderer( { antialias: true } );
renderer2.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer2.domElement );
stats = new Stats();
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
render();
// initMap();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer2.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
controls.update();
renderer1.render( mapScene, camera );
renderer2.render( mapScene, camera );
}
</script>
</body>
</html>
here's the output
THREE.CSS3DObject does not care about the depth buffer of the WebGLRenderingContext. It has no clue about the depth buffer or even depth test. The order of CSS objects can be defined by the z-index.
You try to mix two completely different technologies, which won't interact together in that way.
But you can still make it work.
For this you have to define the z-index of the CSS3DRenderer element lower then the z-index of the WebGLRenderer element so that the WebGLRenderer draws "in front of" the CSS3DRenderer. Further transparency has to be enabled for the WebGLRenderer:
renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.zIndex = 0;
renderer1.domElement.style.top = 0;
container.appendChild( renderer1.domElement );
renderer2 = new THREE.WebGLRenderer( { antialias: true, alpha:true } );
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.zIndex = 1;
renderer2.domElement.style.top = 0;
container.appendChild( renderer2.domElement );
Then you have to ensure that the WebGLRenderer takes care of the CSS3DObject. Technically this can't be done. But you can trick the system.
You can render a completely transparent plane, with equal size an at equal position, as the CSS3DObject in the WebGLRenderer:
var HtmlElement = function ( id, x, y, z, w, h ) {
var div = document.createElement( 'div' );
div.innerHTML = "Hello";
div.id = id; //'googleMap';
div.style.width = w + 'px';
div.style.height = h + 'px';
div.style.backgroundColor = 'blue';
var object = new THREE.CSS3DObject( div );
object.position.set( x, y, z );
return object;
};
var WebGlObject = function ( x, y, z, w, h ) {
var material = new THREE.MeshBasicMaterial({
color: 0x0000000,
opacity: 0.0,
side: THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(w, h);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
return mesh;
};
var mapObject = HtmlElement('googleMap', 0, 0, 0, 800, 800);
var planeMesh = WebGlObject( 0, 0, 0, 800, 800);
See the example, which is based on the code of your question:
var HtmlElement = function ( id, x, y, z, w, h ) {
var div = document.createElement( 'div' );
//div.innerHTML = "Hello";
div.id = id; //'googleMap';
div.style.width = w + 'px';
div.style.height = h + 'px';
div.style.backgroundColor = 'lightblue';
div.style.color = "red";
div.style.fontSize="200px";
div.style.textAlign="center";
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.google.com/maps/embed");
iframe.style.width = w + "px";
iframe.style.height = h + "px";
div.appendChild(iframe);
var object = new THREE.CSS3DObject( div );
object.position.set( x, y, z );
return object;
};
var WebGlObject = function ( x, y, z, w, h ) {
var material = new THREE.MeshBasicMaterial({
color: 0x0000000,
opacity: 0.0,
side: THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(w, h);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
return mesh;
};
var container, stats;
var camera, controls, mapScene, group, renderer1,renderer2;
var objects = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 5000 );
camera.position.set(-600, 300, 700);
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 3.0;
controls.zoomSpeed = 2.2;
controls.panSpeed = 2.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 1.3;
mapScene = new THREE.Scene();
// scene.background = new THREE.Color( 0xf0f0f0 );
group = new THREE.Group();
group.renderOrder=1;
var mapObject = HtmlElement( 'googleMap', 0, 0, 0, 800, 800 );
var planeMesh = WebGlObject(0, 0, 0, 800, 800);
group.add( mapObject );
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
var hex = Math.random() * 0xffffff;
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );
}
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
cube = new THREE.Mesh( geometry, material );
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 102;
group.add( cube );
group.add( planeMesh );
mapScene.add( group );
// renderer
renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.zIndex = 0;
renderer1.domElement.style.top = 0;
container.appendChild( renderer1.domElement );
renderer2 = new THREE.WebGLRenderer( { antialias: true, alpha:true } );
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.zIndex = 1;
renderer2.domElement.style.top = 0;
container.appendChild( renderer2.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer2.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
controls.update();
renderer2.render( mapScene, camera );
renderer1.render( mapScene, camera );
}
<script src="https://threejs.org/build/three.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script-->
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
I am using THREE.js to display a 3d rotating earth in the browser.
I also want a image to appear around the rotating earth.
I tried a few methods but they didnt work at all.
I used the image loader but it shows nothing.
var img = new THREE.ImageLoader();
img.load("texture/circle.png");
I basically wanted something like this, http://imgur.com/AV28hq6
The globe is working well, I just need to have the circular image over it as seen in the picture.
Here is my script tag,
<script>
var container, stats, raycaster;
var camera, scene, renderer;
var group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
group = new THREE.Object3D();
scene.add( group );
// earth
var loader = new THREE.TextureLoader();
loader.load( 'textures/1.jpg', function ( texture ) {
var geometry = new THREE.SphereGeometry( 200, 20, 20 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
raycaster = new THREE.Raycaster();
} );
// shadow
var canvas = document.createElement( 'canvas' );
canvas.width = 128;
canvas.height = 128;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient(
canvas.width / 2,
canvas.height / 2,
0,
canvas.width / 2,
canvas.height / 2,
canvas.width / 2
);
//gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
//gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
var geometry = new THREE.PlaneGeometry( 300, 300, 3, 3 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 250;
//mesh.rotation.x = - Math.PI / 2;
group.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 );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
//camera.position.x += ( mouseX - camera.position.x ) * 0.05;
//camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
group.rotation.y -= 0.001;
renderer.render( scene, camera );
}
</script>
if you looking for some thing like this....Your code might need changes... check this link..http://jsfiddle.net/MP6BF/
var container, stats, raycaster;
var camera, scene, renderer;
var group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
group = new THREE.Object3D();
scene.add( group );
// earth
var loader = new THREE.TextureLoader();
//loader.load( 'http://i.imgur.com/AV28hq6.jpg', function ( texture ) {
loader.load('http://www.joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg',function(texture){
var geometry = new THREE.SphereGeometry( 200, 25, 200 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
raycaster = new THREE.Raycaster();
} );
loader.load( 'http://i.imgur.com/AV28hq6.jpg', function ( texture ) {
var geometry = new THREE.PlaneGeometry( 600, 575, 30, 30 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.z = 100;
//mesh.rotation.x = - Math.PI / 2;
scene.add( mesh );
});
// shadow
var canvas = document.createElement( 'canvas' );
canvas.width = 128;
canvas.height = 128;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient(
canvas.width / 2,
canvas.height / 2,
0,
canvas.width / 2,
canvas.height / 2,
canvas.width / 2
);
//gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
//gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
var geometry = new THREE.PlaneGeometry( 300, 300, 3, 3 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 250;
//mesh.rotation.x = - Math.PI / 2;
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
//camera.position.x += ( mouseX - camera.position.x ) * 0.05;
//camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
group.rotation.y -= 0.001;
renderer.render( scene, camera );
}
Could it be that you forgot yo add some light?
/ add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
Hope it helps!
I am using THREE.js to display a 3d rotating earth in the browser. I also want a image to appear around the rotating earth.
I tried using the built in method,
var img = new THREE.ImageLoader();
img.load("texture/circle.png");
But the image does not appear only. It's just the rotating sphere.
I want something like this
Here is my script tag,
<script>
var container, stats;
var camera, scene, renderer;
var group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 650;
scene = new THREE.Scene();
group = new THREE.Object3D();
scene.add( group );
// earth
var loader = new THREE.TextureLoader();
loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
var geometry = new THREE.SphereGeometry( 200, 20, 20 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
} );
// shadow
var canvas = document.createElement( 'canvas' );
canvas.width = 128;
canvas.height = 128;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient(
canvas.width / 2,
canvas.height / 2,
0,
canvas.width / 2,
canvas.height / 2,
canvas.width / 2
);
//gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
//gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
var geometry = new THREE.PlaneGeometry( 300, 300, 3, 3 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 250;
mesh.rotation.x = - Math.PI / 2;
group.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 );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
//camera.position.x += ( mouseX - camera.position.x ) * 0.05;
//camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
group.rotation.y -= 0.003;
renderer.render( scene, camera );
}
</script>
The plane is horizontal. Remove this line:
mesh.rotation.x = - Math.PI / 2;
Make sure the gradient is set up the way you want it, e.g.,
gradient.addColorStop( 0.9, 'rgba( 210, 210, 210, 1 )' );
gradient.addColorStop( 1, 'rgba( 0, 0, 0, 0 )' );
Also, CanvasRenderer will have artifacts with intersecting objects.
three.js r.62