This is the code i tried but so far it's not working it only shows a white page when i run it !
i've tried changing the path and running it over and over i also tried import maps and it didn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js Model Loader</title>
<body>
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/three#0.120.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#3.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-vis#0.4.0/dist/tfjs-vis.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.120.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
// Create a renderer
const renderer = new WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// Attach the renderer to the container
document.getElementById("container").appendChild(renderer.domElement);
// Load the GLTF model
const loader = new THREE.GLTFLoader();
loader.load('./module/girl/scene.gltf', function(gltf) {
scene.add(gltf.scene);
render();
});
// Render the scene
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
</script>
</body>
</html>
Related
hey guys i am new to threejs and i am trying to import this animated dinosaur that i have downloaded online from. i am trying to load and import and run in my web but met some errors. for file structure, the material_diffuse.png and material_specularGlossiness.png and scene.gltf and scene.bin are all in the same folder as index.html.
some of the errors i face are listed.
textures/Material_diffuse.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
textures/Material_specularGlossiness.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
GLTFLoader.js:127 DOMException: The source image could not be decoded.
this is my code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="three.js"></script>
<script type="module" src="GLTFLoader.js"></script>
<script type="module">
import { GLTFLoader } from "./GLTFLoader.js";
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.01,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new GLTFLoader();
var obj;
loader.load("scene.gltf", function (gltf) {
obj = gltf.scene;
scene.add(gltf.scene);
});
scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff, 0x444444);
scene.add(light);
// camera.position.set(0, 5, 30);
camera.position.set(0, 5, 8);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
function rotateFunction() {
obj.rotation.y += 0.01;
}
document.addEventListener('scroll', function(e) { rotateFunction() });
</script>
<div>
</div>
</body>
</html>
thanks in advance.
According to the reported errors, the file structure should look like so:
+-- scene.gltf
+-- scene.bin
+-- textures
| +-- Material_diffuse.png
| +-- Material_specularGlossiness.png
Meaning you have to put your textures into a textures directory.
Besides, the imports of your app are wrong. Use these imports for now until your app works:
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three#0.135.0/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three#0.135.0/examples/jsm/loaders/GLTFLoader.js';
I have rendered a simple cube in Three.JS to the screen, now the way I have found online is that I need to use PointerLockControls.js lock the mouse and look around the scene. I have managed to look the cursor and hide it using this, however I am unsure how I go about implementing "look around"
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="javascript/three.js"></script>
<script src="javascript/PointerLockControls.js"></script>
<script>
var scene, camera, renderer, geometry, material, cube;
var init = function(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
geometry = new THREE.BoxGeometry();
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
document.addEventListener("mousedown", doMouseDown, false);
//const controls = new PointerLockControls( camera, document.body);
controls = new THREE.PointerLockControls( camera, document.body );
}
function doMouseDown(event){
controls.lock();
}
function render() {
renderer.render( scene, camera );
};
init();
render();
</script>
</body>
</html>
By "looking around", I assume you want to move the camera around?
This may be a start for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
#js3canvas { width:800px; height:600px; }
</style>
</head>
<body>
<canvas id="js3canvas"></canvas>
<script src="javascript/three.js"></script>
<script>
var scene, camera, renderer, geometry, material, cube;
var canvaselt = document.getElementById("js3canvas");
var init = function(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, canvaselt.clientWidth/canvaselt.clientHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer( { canvas:canvaselt } );
renderer.setSize(canvaselt.clientWidth, canvaselt.clientHeight);
geometry = new THREE.BoxGeometry();
material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
canvaselt.addEventListener("mousemove", doMouseMove, false);
}
function doMouseMove(ev) { // point camera
camera.lookAt((ev.pageX-400)/100, -(ev.pageY-300)/100, 0);
}
function animate() { // need to animate, not just render once
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
init();
animate();
</script>
</body>
</html>
I am practicing threejs while watching the tutorial.
However, one problem occurred.
Mouse control code is not working. Only black screen.
I checked, but it's exactly the same code as the tutorial.
But mine doesn't work.
I am the latest version of Chrome and I got the latest file from OrbitControls.js from GitHub.
I think the only difference from the tutorial is the OrbitControls.js file.
What should I do?
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
window.addEventListener('load', init);
function init() {
const width = 960;
const height = 540;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, 1000);
const controls = new THREE.OrbitControls(camera);
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(300, 300, 300),
new THREE.MeshNormalMaterial()
);
scene.add(mesh);
tick();
function tick() {
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
One common root cause for such importing issues is the usage of three.js components from different releases. You can easily verify this by importing your code like so:
<script src="https://cdn.jsdelivr.net/npm/three#0.110/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.110/examples/js/controls/OrbitControls.js"></script>
Another possible problem is the way you create OrbitControls. In recent versions of three.js, the second parameter is mandatory. Meaning the code should look like so:
const controls = new THREE.OrbitControls(camera, renderer.domElement);
This could be a continuation of What is the URL for three.js to include it online? , I guess...
I had found this example online:
https://github.com/josdirksen/learning-threejs/blob/master/chapter-08/16-load-vrml.html
To have it run from a single file (included below), so it downloads all its JS libs online, I've had to change this part:
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/VRMLLoader.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/OrbitControls.js"></script>
Into this:
<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/loaders/VRMLLoader.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Question 1: Is there a more appropriate CDN for VRMLLoader.js and similar libraries, so this example runs from a single .html file? I'd rather not hit three.js - then again, if I enter a fake link like https://threejs.org/examples/js/libs/dat.gui.js I get a 404 with "Read the full documentation for more information about using GitHub Pages.", so maybe it's OK now?
Anyways, when I run the file in Firefox 57.0.4 on Ubuntu 14.04, I get this:
As you can see, the background is fluorescent green, likely RGB of 0x00FF00; however, the code says:
webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));
... so I should get a black background here, instead? And if I set 0xFFF instead of 0x000 in .setClearColor, then I get a yellow background ?!
Question 2: How can I specify a background color, and have it render correctly, in this three.js example?
Here is the file threejs-16-load-vrml.html - just save it locally and open in a browser:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- https://raw.githubusercontent.com/josdirksen/learning-threejs/master/chapter-08/16-load-vrml.html
-->
<html>
<head>
<title>Example 08.16 - Load vrml model </title>
<!-- <script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/VRMLLoader.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/OrbitControls.js"></script>
-->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script>
-->
<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/loaders/VRMLLoader.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xFFF, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// position and point the camera to the center of the scene
camera.position.x = 30;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var orbit = new THREE.OrbitControls(camera);
var dir1 = new THREE.DirectionalLight(0.4);
dir1.position.set(-30, 30, -30);
scene.add(dir1);
var dir2 = new THREE.DirectionalLight(0.4);
dir2.position.set(-30, 30, 30);
scene.add(dir2);
var dir3 = new THREE.DirectionalLight(0.4);
dir3.position.set(30, 30, -30);
scene.add(dir3);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(30, 30, 30);
scene.add(spotLight);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {
// we need the first child, since it's a multimaterial
};
var group;
var gui = new dat.GUI();
var loader = new THREE.VRMLLoader();
var group = new THREE.Object3D();
//~ loader.load("../assets/models/vrml/tree.wrl", function (model) {
loader.load("https://raw.githubusercontent.com/josdirksen/learning-threejs/master/assets/models/vrml/tree.wrl", function (model) {
console.log(model);
model.traverse(function (child) {
if (child instanceof THREE.Mesh) {
// child.material = new THREE.MeshLambertMaterial({color:0xaaaaaa});
console.log(child.geometry);
}
});
model.scale.set(10, 10, 10);
scene.add(model);
});
render();
function render() {
stats.update();
orbit.update();
if (group) {
group.rotation.y += 0.006;
// group.rotation.x+=0.006;
}
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
</body>
</html>
dat.gui.js -> dat.gui.min.js
Read attentively about THREE.Color() here.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#fff');
document.body.appendChild(renderer.domElement);
var sphere = new THREE.Mesh(new THREE.SphereGeometry(), new THREE.MeshBasicMaterial({color: "blue", wireframe: true}));
scene.add(sphere);
var gui = new dat.GUI();
gui.add(sphere.scale, "x", .5, 2);
render();
function render(){
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body{
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
I have code like this:
<html>
<head>
<script src="js/three.js"></script>
<script type="text/javascript">
function init()
{
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(0, window.innerWidth / window.innerHeight, 100, 100);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1000, 1000);
document.body.appendChild(renderer.domElement);
var sphere_geometry = new THREE.SphereGeometry(150);
var material1 = new THREE.MeshPhongMaterial({ color: 0x0033ff, specular: 0x555555 });
var sphere_mesh = new THREE.Mesh(sphere_geometry, material1);
scene.add(sphere_mesh);
renderer.render(scene, camera);
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>
and i can't add a sphere into the scene. The only thing that i get is black square. How can I do it?
Just some fast tips:
-Place the camera to see the object, not just position but the direction where it is facing, do you have all your objects in front?
-Make the object visible, choose a good material definition, start with a boiler plate/hello world scene, once it works, modify it to get the scene as you want it to be.