This is my source code. I am trying to make the text rotate according to mouse position.
// Initialization
const scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
let body = document.getElementsByTagName("body");
let pageX = 0.5;
let pageY = 0.5;
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById("board").appendChild(renderer.domElement);
// Handle resize event
window.addEventListener('resize', () => {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
camera.position.z = 20;
// Create light
let directLight = new THREE.DirectionalLight('#fff', 4);
directLight.position.set(0, 7, 5);
scene.add(directLight);
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
function animate (){
requestAnimationFrame( animate );
var loader = new THREE.FontLoader();
loader.load( 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 3,
height: 0.5,
curveSegments: 4,
bevelEnabled: true,
bevelThickness: 0.02,
bevelSize: 0.05,
bevelSegments: 3
} );
geometry.center();
var material = new THREE.MeshPhongMaterial(
{ color: '#dbe4eb', specular: '#dbe4eb' }
);
var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = (pageY - 0.5) * 2;
mesh.rotation.y = (pageX - 0.5) * 2;
scene.add( mesh );
} );
renderer.render(scene, camera);
}
animate();
// Get mouse coordinates inside the browser
document.body.addEventListener('mousemove', (event) => {
pageX = event.pageX / window.innerWidth;
pageY = event.pageY / window.innerHeight;
});
renderer.render(scene, camera);
</script>
This is the best I could get. The problem is that each time I move the mouse, it instantiates a new mesh and rotates it accordingly, and I only need one mesh to follow the mouse. Can anyone help?
Thanks in advance!
As you already figured out, each frame you're reloading the font and ultimately recreating the mesh each time.
To get around this you need to move the font loading and object creation inside some initialization function, so it just happens once.
The only part of code you want to keep inside the render loop is the updating of the text's rotation according to the mouse movement:
mesh.rotation.x = (pageY - 0.5) * 2;
mesh.rotation.y = (pageX - 0.5) * 2;
This will bring up another problem though. Since mesh is a local object defined inside the callback function of the font loader, it won't be accessible outside. Luckily three.js offers a property called .name which you can use to give your object a name.
e.g.
var mesh = new THREE.Mesh(geometry, material);
mesh.name = "myText";
scene.add(mesh);
Later on you can get a reference to this object using:
scene.getObjectByName("myText")
Here's an example:
var container, scene, camera, renderer, pageX, pageY;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
pageX = 0.5;
pageY = 0.5;
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container").appendChild(renderer.domElement);
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
camera.position.z = 20;
let directLight = new THREE.DirectionalLight('#fff', 4);
directLight.position.set(0, 7, 5);
scene.add(directLight);
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
var loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
var geometry = new THREE.TextGeometry('Hello three.js!', {
font: font,
size: 3,
height: 0.5,
curveSegments: 4,
bevelEnabled: true,
bevelThickness: 0.02,
bevelSize: 0.05,
bevelSegments: 3
});
geometry.center();
var material = new THREE.MeshPhongMaterial({
color: '#dbe4eb',
specular: '#dbe4eb'
});
var mesh = new THREE.Mesh(geometry, material);
mesh.name = "myText";
scene.add(mesh);
animate();
});
document.body.addEventListener('mousemove', (event) => {
pageX = event.pageX / window.innerWidth;
pageY = event.pageY / window.innerHeight;
});
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
scene.getObjectByName("myText").rotation.x = (pageY - 0.5) * 2;
scene.getObjectByName("myText").rotation.y = (pageX - 0.5) * 2;
renderer.render(scene, camera);
}
init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<div id="container"></div>
Related
I'm trying to load a texture with three.js to use it as a normal map. It returns no error or anything else, but the texture is not loading. I end up with a black ball
import * as THREE from 'three';
/** Build the scene. */
const canvas = document.querySelector('#canvas');
const scene = new THREE.Scene();
const textureLoader = new THREE.TextureLoader();
/** Create the sphere. */
const gemoetry = new THREE.SphereBufferGeometry(.5, 64, 64);
const material = new THREE.MeshStandardMaterial({
metalness: 0.7,
roughness: 0.2,
normalMap: textureLoader.load('https://res.cloudinary.com/axiol/image/upload/v1617884764/CodePen/normalMap.png'),
color: new THREE.Color(0x292929)
});
const sphere = new THREE.Mesh(gemoetry, material);
scene.add(sphere);
/** Set the sizes based on the windows size. */
const sizes = {
width: window.innerWidth,
height: window.innerHeight
};
/** Add some light. */
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
window.addEventListener('resize', () => {
sizes.width = window.innerWidth
sizes.height = window.innerHeight
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
});
/** Place the camera. */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 2;
scene.add(camera);
/** Render the scene. */
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.render(scene, camera);
I don't really see what I could be missing here. Any idea ?
You render the scene with a normal map which is not yet fully loaded. Try it like so:
/** Build the scene. */
const canvas = document.querySelector('#canvas');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
const textureLoader = new THREE.TextureLoader();
/** Create the sphere. */
const gemoetry = new THREE.SphereBufferGeometry(0.5, 64, 64);
const material = new THREE.MeshStandardMaterial({
metalness: 0.7,
roughness: 0.2,
normalMap: textureLoader.load('https://res.cloudinary.com/axiol/image/upload/v1617884764/CodePen/normalMap.png', render),
color: new THREE.Color(0xffffff)
});
const sphere = new THREE.Mesh(gemoetry, material);
scene.add(sphere);
/** Set the sizes based on the windows size. */
const sizes = {
width: window.innerWidth,
height: window.innerHeight
};
/** Add some light. */
const pointLight = new THREE.PointLight(0xffffff, 1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
window.addEventListener('resize', () => {
sizes.width = window.innerWidth
sizes.height = window.innerHeight
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
});
/** Place the camera. */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 2;
scene.add(camera);
/** Render the scene. */
const renderer = new THREE.WebGLRenderer({
canvas: canvas
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
render();
function render() {
renderer.render(scene, camera);
}
body {
margin:0
}
<script src="https://cdn.jsdelivr.net/npm/three#0.127.0/build/three.js"></script>
<canvas id="canvas"></canvas>
Notice the call of render() in the onLoad() callback of TextureLoader.load().
Want to create objects (cubes), within a for loop, then output them in a random location on the page. Cubes do not appear unsure why.
**Info: When I console log the cube get **
-cube.js:24 Mesh {uuid: "8859E918-7D3A-47ED-BDEF-072BC60FF725", name:
"", type: "Mesh", parent: Scene, children: Array(0), …}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 0.1, 1000 )
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth,window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
var geometry = new THREE.BoxGeometry(3, 1, 1);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
meshX = -5;
for(var i = 0; i<20;i++) { //amount of shapes
cube.position.x = (Math.random() - 0.5) * 10; //Location of shapes
cube.position.y = (Math.random() - 0.5) * 10;
cube.position.z = (Math.random() - 1.2) * 10;
scene.add(cube);
meshX+=1;
console.log(cube);
}
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
You need a light for MeshLambertMaterial (as opposed MeshBasicMaterial which does not use lights).
Also, you need to make a new Cube instance in the loop, otherwise you are just changing the location of the initial cube.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 0.1, 1000 )
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth,window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
var geometry = new THREE.BoxGeometry(3, 1, 1);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
//var cube = new THREE.Mesh(geometry, material);
//meshX = -5;
for(var i = 0; i<20;i++) { //amount of shapes
var cube = new THREE.Mesh(geometry, material);
cube.position.x = (Math.random() - 0.5) * 10; //Location of shapes
cube.position.y = (Math.random() - 0.5) * 10;
cube.position.z = (Math.random() - 1.2) * 10;
scene.add(cube);
//meshX+=1;
//console.log(cube);
}
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
body {
padding: 0;
margin: 0;
position: relative;
}
<script src="https://rawgithub.com/mrdoob/three.js/r104/build/three.js"></script>
I am not at all experienced with three.js but I am trying to create a camera effect equal to this one: https://threejs.org/examples/#webgl_geometry_colors
I was trying to use the following code to read out the mouse positions and apply those, (they do it the same way in the example).
For the sake of trying to find out where the problem is I put in "camera.positon.x = 1000" to see if it works, which it does not. Now I don't know where the problem lies but I just can't get the mouse to work.
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
camera.position.x = 10000;
}
(I don't want to use Orbit Controls by the way)
Thanks in advance
Below is the entire code
<script>
var renderer, camera, controls, scene, mesh1, mesh2;
function init(){
renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x000044);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0,0,750);
resize();
window.onresize = resize;
var light = new THREE.AmbientLight(0xFFFFFF, 0.9);
scene.add(light);
var light2 = new THREE.PointLight(0xFFFFFF, 1);
scene.add(light2);
light2.position.set(0,8,75);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xFF1111,
});
mesh1 = new THREE.Mesh(geometry,material);
mesh1.rotation.x = -0.05;
scene.add(mesh1);
mesh1.position.set(0,0,50);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x11FF11,
});
mesh2 = new THREE.Mesh(geometry,material);
mesh2.rotation.x = -0.05;
scene.add(mesh2);
mesh2.position.set(0,0,0);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x1111FF,
});
mesh3 = new THREE.Mesh(geometry,material);
mesh3.rotation.x = -0.05;
scene.add(mesh3);
mesh3.position.set(0,0, -50);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
camera.position.x = 10000;
}
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
camera.position.x += 0.5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
init(); render();
</script>
The variables windowHalfX and windowHalfY are not defined in your code.
If the position of the camera should depend on the mouse position, then you have to manipulate the camera position by the change of the mouse position. This means you have to calculate the difference of the current mouse position and the previous mouse position.
If you want to calculate a manipulation of the position, dependent on the position of the mouse in relation to the center of the canvas, then the code should look somehow like this:
var prevDeltaX = 0, prevDeltaY = 0;
function onDocumentMouseMove( event ) {
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = (window.innerWidth / 2 - mouseX);
var deltaY = (mouseY - window.innerHeight / 2);
camera.position.x += deltaX - prevDeltaX;
camera.position.y += deltaY - prevDeltaY;
prevDeltaX = deltaX; prevDeltaY = deltaY;
}
See the snippet:
var renderer, camera, controls, scene, mesh1, mesh2;
function init(){
renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x000044);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0,0,750);
resize();
window.onresize = resize;
var light = new THREE.AmbientLight(0xFFFFFF, 0.9);
scene.add(light);
var light2 = new THREE.PointLight(0xFFFFFF, 1);
scene.add(light2);
light2.position.set(0,8,75);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xFF1111,
});
mesh1 = new THREE.Mesh(geometry,material);
mesh1.rotation.x = -0.05;
scene.add(mesh1);
mesh1.position.set(0,0,50);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x11FF11,
});
mesh2 = new THREE.Mesh(geometry,material);
mesh2.rotation.x = -0.05;
scene.add(mesh2);
mesh2.position.set(0,0,0);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x1111FF,
});
mesh3 = new THREE.Mesh(geometry,material);
mesh3.rotation.x = -0.05;
scene.add(mesh3);
mesh3.position.set(0,0, -50);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
var prevDeltaX = 0, prevDeltaY = 0;
function onDocumentMouseMove( event ) {
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = (window.innerWidth / 2 - mouseX);
var deltaY = (mouseY - window.innerHeight / 2);
camera.position.x += deltaX - prevDeltaX;
camera.position.y += deltaY - prevDeltaY;
prevDeltaX = deltaX; prevDeltaY = deltaY;
}
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
//camera.position.x += 0.5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
init(); render();
<script src="https://threejs.org/build/three.min.js"></script>
<canvas id="myCanvas"></canvas>
Hi I have been playing with render targets but I ran into some problems. I created a simplified example here:
init = function() {
// RENDERER
canvas = document.getElementById("mycanvas");
renderer = new THREE.WebGLRenderer({
antialias: true
});
document.body.appendChild( renderer.domElement );
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
// SCENE
texscene = new THREE.Scene();
texcamera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
texcamera.position.z = 2;
// FRAMEBUFFER
var renderTargetParams = {
minFilter:THREE.LinearFilter,
stencilBuffer:false,
depthBuffer:false,
wrapS: THREE.RepeatWrapping,
wrapT: THREE.RepeatWrapping
};
rendertarget = new THREE.WebGLRenderTarget( 512, 512, renderTargetParams );
// CUBE
var cubeGeo = new THREE.BoxGeometry( 1, 1, 1, 1, 1, 1 );
var cubeMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
texcube = new THREE.Mesh( cubeGeo, cubeMat )
texscene.add(texcube);
var blueMaterial = new THREE.MeshBasicMaterial({color:0x7074FF})
var plane = new THREE.PlaneBufferGeometry( 100, 100 );
var planeObject = new THREE.Mesh(plane,blueMaterial);
planeObject.position.z = -15;
texscene.add(planeObject);
/////////////////////////////////
//SCENE
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
var boxMaterial = new THREE.MeshBasicMaterial({map:rendertarget.texture});
var boxGeometry2 = new THREE.BoxGeometry( 5, 5, 5 );
mainBoxObject = new THREE.Mesh(boxGeometry2,boxMaterial);
// Move it back so we can see it
mainBoxObject.position.z = -10;
// Add it to the main scene
scene.add(mainBoxObject);
animate();
}
animate = function() {
requestAnimationFrame(animate);
renderer.render(texscene, texcamera, rendertarget);
renderer.render(scene, camera);
texcube.rotation.y += 0.01;
texcube.rotation.z += 0.01;
mainBoxObject.rotation.x +=0.01;
mainBoxObject.rotation.y += 0.005;
mainBoxObject.rotation.z += 0.008;
}
init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
I render a red cube and a blue plane to a render target then use it as a texture. Problem is the red cube is not visible in the final result.
Try for yourself to see the render target scene by changing
renderer.render(texscene, texcamera, rendertarget);
renderer.render(scene, camera);
to
renderer.render(texscene, texcamera);
Apparantly the problem is caused by turning off the depth buffer as I had done in the settings of my rendertarget
depthBuffer:false,
Removing this line makes my rendertarget render as it should with a red box on a blue background
so Ive been messing with this, and Ive finally gotten everything to kind of work for me. I'm a beginner at any type of javascript so I don't know if this is a simple fix. Basically I cant get the light to show up on the moon like how it does in the original.
Well here is what I have thus far.
<script type="text/javascript" id="mainCode">
var container,
renderer,
scene,
camera,
mesh,
light = {
speed: 0.1,
distance: 1000,
position: new THREE.Vector3(0, 0, 0),
orbit: function (center, time) {
this.position.x =
(center.x + this.distance) * Math.sin(time * -this.speed);
this.position.z =
(center.z + this.distance) * Math.cos(time * this.speed);
}
},
clock,
controls;
init();
function init() {
// grab the container from the DOM
container = document.getElementById( "container" );
scene = new THREE.Scene();
var fov = 35,
aspect = window.innerWidth / window.innerHeight,
near = 1,
far = 65536;
renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
renderer.setClearColor(0x000000, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 800);
scene.add(camera);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 0.5;
controls.dynamicDampingFactor = 0.5;
clock = new THREE.Clock();
var radius = 100;
var xSegments = 50;
var ySegments = 50;
var geo = new THREE.SphereGeometry(radius, xSegments, ySegments);
var mat = new THREE.ShaderMaterial({
uniforms: {
lightPosition: {
type: 'v3',
value: light.position
},
textureMap: {
type: 't',
value: THREE.ImageUtils.loadTexture( "img/maps/moon.jpg" )
},
normalMap: {
type: 't',
value: THREE.ImageUtils.loadTexture( "img/maps/normal.jpg" )
},
uvScale: {
type: 'v2',
value: new THREE.Vector2(1.0, 1.0)
}
},
vertexShader:document.getElementById('vertexShader').textContent,
fragmentShader:document.getElementById('fragmentShader').textContent
});
mesh = new THREE.Mesh(geo, mat);
mesh.geometry.computeTangents();
mesh.position.set(0, 0, 0);
mesh.rotation.set(0, 180, 0);
scene.add(mesh);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
light.orbit(mesh.position, clock.getElapsedTime());
controls.update(camera);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', onWindowResize, false);
</script>
You never add any lights to your scene. The moon example uses a custom shader which is more complicated than what you need right now. You need to create a regular Three light and add it to your scene, for example
http://threejs.org/docs/#Reference/Lights/PointLight
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );