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>
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>
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>
I am trying to render a 3D model using Three.js on the browser and also trying to add annotations similar to https://sketchfab.com/3d-models/interactive-test-778258c754a74d37a72d3274b80c6ce1 . I am using https://manu.ninja/webgl-three-js-annotations/ as a reference. I tried following the first half of the article which just adds the screen projections but i dont see any annotations in my model.Would really appreciate any help in understanding what i am missing.
HTML code
<html>
<head>
<title>Cube</title>
<style>
body { margin: 0;}
</style>
</head>
<body>
<div class="annotation">
<p><strong>Cube</strong></p>
<p>Sentence about cube</p>
</div>
<canvas id="number" width="64" height="64"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<script src="/assets/OrbitControls.js"></script>
<script src="http://rawcdn.githack.com/mrdoob/three.js/r99/examples/js/loaders/GLTFLoader.js"></script>
<script src="/examples/3d-obj-loader/scripts_annotation.js"></script>
</body>
</html>
scripts_annotation.js
//global variables
var camera, scene, renderer, controls;
var sprite, spriteBehindObject, model;
init();
render();
//camera set up and model loading
function init(){
//camera settings
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 2, 2000 );
camera.position.set(700,500,1250);
scene = new THREE.Scene();
//renderer setting
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio);
// renderer.setClearColor(0x1E1E1E);
renderer.setClearColor(0xffffff);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
document.body.appendChild( renderer.domElement );
window.addEventListener('resize',onWindowResize, false);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
var loader = new THREE.CubeTextureLoader().setPath( '/examples/3d-obj-loader/reflections/Park2/' );
var background = loader.load( urls );
var light = new THREE.HemisphereLight( 0xffffff, 0xffffff , 5 );
light.position.set( 0, 1, 0 );
scene.add( light );
//model
// Mesh
const cubeGeometry = new THREE.BoxGeometry(500, 500, 500);
mesh = new THREE.Mesh(
cubeGeometry,
new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading
})
);
const line = new THREE.LineSegments(
new THREE.WireframeGeometry(cubeGeometry),
new THREE.LineBasicMaterial({
color: 0xffffff,
linewidth: 1,
opacity: 0.25,
transparent: true
})
);
scene.add(mesh);
scene.add(line);
}
function onWindowResize(){
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function render(){
requestAnimationFrame( render );
controls.update();
renderer.render(scene, camera);
updateScreenPosition();
}
function updateScreenPosition() {
const vector = new THREE.Vector3(0, 17, 8);
const canvas = renderer.domElement;
vector.project(camera);
vector.x = Math.round((0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio));
vector.y = Math.round((0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio));
const annotation = document.querySelector(".annotation");
annotation.style.top = `${vector.y}px`;
annotation.style.left = `${vector.x}px`;
annotation.style.opacity = spriteBehindObject ? 0.25 : 1;
}
Solved this issue by replacing the following line in html file on my local machine
<link rel="stylesheet" href="/examples/3d-obj-loader/Surface_style.scss" type="text/scss"> to <link rel="stylesheet" href="/examples/3d-obj-loader/Surface_style.scss" type="text/css">
This line was the only difference between the codepen and code on my local machine
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/
Three.js Version: 82
I'm looking at this example here: https://threejs.org/examples/#webgl_helpers
Notice that there are yellow boxes around the models. I was using version 79 and was using THREE.EdgesHelper to outline my 3D objects I made in Blender, but THREE.EdgesHelper was replaced by THREE.EdgesGeometry. I wanted to see an example of this, and the only one I could find is linked above.
I dove into the line and BoxHelper objects, but I didn't notice anything that would allow me to get rid of those yellow boxes.
JSFiddle: https://jsfiddle.net/4nbjvmpe/
Here is the code from the JSFiddle:
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new THREE.OrbitControls( camera );
// ambient
scene.add( new THREE.AmbientLight( 0x222222 ) );
// light
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 20, 20, 0 );
scene.add( light );
// geometry
var geometry = new THREE.SphereGeometry( 5, 12, 8 );
// material
var material = new THREE.MeshPhongMaterial( {
color: 0x00ffff,
shading: THREE.FlatShading,
transparent: true,
opacity: 0.7,
} );
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// CUSTOM
// This is where I create the outline mesh.
var group = new THREE.Group();
scene.add( group );
group.updateMatrixWorld(true);
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges);
group.add(line);
line.material.depthTest = true;
line.material.opacity = 0.25;
line.material.transparent = false;
this.outlineMesh = new THREE.BoxHelper(line);
scene.add(this.outlineMesh);
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
Simply comment this.outlineMesh = new THREE.BoxHelper(line); and scene.add(this.outlineMesh);. you will get want you want.