I'm just begun with three.js and I'm stuck as to why the code is not rendering to my Google Chrome browser. I have also enabled WebGL in the Advanced settings. I've left my code below from a simple tutorial. Thanks in advance for your help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%};
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
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();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
Related
Is there a way to put this scene inside an ionic 6 page? I already tried to copy/paste the script and css but i can't make it work, i only see a black screen while it should display this
Script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
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();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
This is my code with Three.js. Here I've written a simple code for a red colored, point light and a textured torus with a simple animation. But I got only a black colored torus rotating.
The things written in this code doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
<style>
body{
margin: 0;
background-color: #242424;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from '../build/three.module.js';
import { MeshStandardMaterial } from '../src/materials/MeshStandardMaterial.js';
//scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 1000 );
const renderer = new THREE.WebGLRenderer({
alpha : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.TorusGeometry(12,3,140,100);
const texture = new THREE.TextureLoader().load('../examples/textures/golf.jpg');
const light = new THREE.PointLight(0xffffff);
light.position.set(2,3,4);
scene.add(light);
const material = new THREE.MeshStandardMaterial({
color: 0xff0000,
roughness: 0.5,
metalness: 0.75
});
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 60;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
I made a jsfiddle and modified your code in order to work:
https://jsfiddle.net/hrm3ab97/show
Since I used jsfiddle, I provided a full external path for three.js module. That made the torus appear.
In case your phone does not support the default WebGL 2, I changed it to WebGL 1, just remove "1" from 'WebGl1Renderer' to see if it still works.
I moved the light further in order to fully light the torus -unless you wanted to light just its inner ring.
The texture code wasn't complete, so I modified the method that loads the texture and applies the map in order to work -I picked a random texture from three.js examples website as they don't limit cross-origin usage.
If you remove the 'map' from the material you'll see the simple red
material color.
remove 'show' from the jsfiddle link to disable fullscreen and see the code. There is a bug in the stackoverflow editor that prevents the full HTML code to appear, so I omitted it here.
import * as THREE from 'https://threejs.org/build/three.module.js';
//scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 10, 1000 );
const renderer = new THREE.WebGL1Renderer({
alpha : true
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.TorusGeometry(12,3,140,100);
const map = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
const material = new THREE.MeshStandardMaterial({
roughness: 0.5,
metalness: 0.75,
map: map,
});
const light = new THREE.PointLight(0xffffff);
light.position.set(20,30,40);
scene.add(light);
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );
camera.position.z = 40;
const animate = function () {
requestAnimationFrame( animate );
torus.rotation.x += 0.01;
torus.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
Hi I am facing a problem on cannot display the 3D model THREE.js GLTFLoader(), the following is my script:
Here is the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>hey</li>
<li>heysda</li>
</ul>
</nav>
<div class="scene"></div>
<script src="./three.min.js"></script>
<script src="./GLTFLoader.js"></script>
<script src="./app.js"></script>
</body>
</html>
here is the js file:
//Variables for setup
let container;
let camera;
let renderer;
let scene;
let house;
function init() {
container = document.querySelector(".scene");
//Create scene
scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 1000;
//Camera setup
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 100);
const ambient = new THREE.AmbientLight(0x404040, 2);
scene.add(ambient);
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(50, 50, 100);
scene.add(light);
//Renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
//Load Model
let loader = new THREE.GLTFLoader();
loader.load("./house/scene.gltf", function(gltf) {
scene.add(gltf.scene);
house = gltf.scene.children[0];
animate();
});
}
function animate() {
requestAnimationFrame(animate);
house.rotation.z += 0.005;
renderer.render(scene, camera);
}
init();
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
window.addEventListener("resize", onWindowResize);
I ran the code on notepad++ and chrome browser, but it turned out blank screen without showing my 3D model.
Anyone knows the solution? thanks in advance!
The way how you work with container is problematic since clientHeight is zero when you access it to compute the aspect ratio. I suggest you start with using window.innerWidth and window.innerHeight at the beginning.
Besides, there are two minor issues with your model. The model has an extreme scale so you won't see it with your current camera position. You are way too close. Besides, the model has an offset so it's recommended to center it. Try it with this code:
//Variables for setup
let camera;
let renderer;
let scene;
let house;
init();
function init() {
//Create scene
scene = new THREE.Scene();
const fov = 60;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
//Camera setup
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set( 0, 0, 5 );
const ambient = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambient );
const light = new THREE.DirectionalLight( 0xffffff, 0.8 );
light.position.set( 0, 0, 10 );
scene.add( light );
//Renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Load Model
const loader = new THREE.GLTFLoader();
loader.load( './house/scene.gltf', function ( gltf ) {
house = gltf.scene;
// scale model down
house.scale.setScalar( 0.001 );
// center it
const box = new THREE.Box3().setFromObject( house );
const center = box.getCenter( new THREE.Vector3() );
house.position.x += ( house.position.x - center.x );
house.position.y += ( house.position.y - center.y );
house.position.z += ( house.position.z - center.z );
scene.add( house );
animate();
} );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize );
I am trying to add Orbit Controls to my scene without success. The code below keeps giving me an error Uncaught TypeError: THREE.OrbitControls is not a constructor. I have tried different solutions I came across the web but, the error still persists. What am I doing wrong?
Pseudocode
Add Orbit Controls
Be able to use Orbit Controls in the scene
Thank you in advance.
Codepen
HTML
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="https://82mou.github.io/threejs/js/OrbitControls.js"></script>
</body>
</html>
JS
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
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 );
// CAMERA
var camera = new THREE.PerspectiveCamera(75, 320 / 240, 1, 1000);
camera.position.set(250, 200, 250);
camera.lookAt(0, 0, 0);
// add controls for the camera
var controls = new THREE.OrbitControls(camera);
var geometry = new THREE.PlaneGeometry(100, 50);
var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
camera.position.z = 200;
var animate = function () {
requestAnimationFrame( animate );
controls.update();
// plane.rotation.x += 0.01;
// plane.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
There is an issue in your codepen. When you import OrbitControls via ES6 imports, it's not necessary to use the THREE namespace. So when doing something like this:
import { OrbitControls } from "https://unpkg.com/three#0.112/examples/jsm/controls/OrbitControls.js";
you have to to create OrbitControls like so:
controls = new OrbitControls( camera, renderer.domElement );
Live example: https://jsfiddle.net/68kzagry/1/
I am new to three.js and relatively new to Javascript. I made the "Getting Started" project on threejs.org, the rotating cube, without any trouble. However, when I tried adding a wireframe, the project stopped working.
Can you please help me to figure out what is wrong? The code snippet is below.
Thanks!
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; } canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<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 );
geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
object = new THREE.Mesh( geometry, material );
wireframe = new THREE.WireframeHelper( object, 0x00ff00 );
scene.add( object );
scene.add( wireframe );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
You just needed to update your variable names, you still had reference to a cube in the render loop when you changed it to object. Did you check your JavaScript console for errors? I also moved the camera back so its not inside the cube.
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 );
geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
object = new THREE.Mesh( geometry, material );
wireframe = new THREE.WireframeHelper( object, 0x00ff00 );
scene.add( object );
scene.add( wireframe );
camera.position.z = 15;
var render = function () {
requestAnimationFrame( render );
object.rotation.x += 0.05;
object.rotation.y += 0.05;
renderer.render(scene, camera);
};
render();
html, body, canvas { margin: 0; padding: 0; display: block; width: 100%; height: 100% }
<html>
<head>
<title>My first Three.js app</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
</body>
</html>