I just created a new app with npm and started to learn three.js . I don't know if I deleted something accidentally but the browser keeps giving an error. (VM80:6770 crbug/1173575, non-JS module files deprecated.)
import './style.css'
import * as THREE from 'three';
import { BoxGeometry } from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/ window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(innerWidth/innerHeight);
camera.position.setZ(30);
renderer.render(scene, camera);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial( {color: red, wireframe: true} ) ;
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
HTML:
<body>
<canvas id="bg"></canvas>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
edit: it somehow a bit fixed but chrome still gives errors.
updated screenshot
edit 2:
I created new app again and when I render it, the page gave me this:
I fixed it. In the last version, npm creates an automatic 'app' and I kept deleting it. I should include 'canvas' tag in there. That was all it
Related
I want to display a glTF file using Three.js. Due to CORS policy, I am using local server(Servez). When I am running it on Mozilla Firefox, it has no errors but still it is not showing anything. On doing same on Chrome, it is showing- "Not allowed to load local resource:". Even I have used the Chrome Web Server extension, but still results the same on both browsers.
PS-I know that this is related to some security issues with Chrome but I do not want to override any security settings.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
</head>
<body>
<script type="module" src="https://threejs.org/build/three.js"></script>
</script>
<script type="module">
import {GLTFLoader} from 'C:/Users/Prinzu/three.js-master/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'C:/Users/Prinzu/three.js-master/examples/jsm/controls/OrbitControls.js';
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
let loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>
your paths are all over the place
this
<script type="module" src="https://threejs.org/build/three.js"></script>
<script type="module">
import {GLTFLoader} from 'C:/Users/Prinzu/three.js-master/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'C:/Users/Prinzu/three.js-master/examples/jsm/controls/OrbitControls.js';
should be something closer to this
<script type="module">
import * as THREE from './three.js-master/build/three.module.js';
import {GLTFLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from './three.js-master/examples/jsm/controls/OrbitControls.js';
Notice there is only one script tag. That it's loading three.module.js not three.js and it's loading it via import.
Then arrange your files something like
+-somefolder
+-yourpage.html
+-scene.gltf
+-scene.bin
+-three.js-master
+-build
| +-three.module.js
+-examples
+-jsm
+-controls
| +-OrbitControls.js
+-loaders
+-GLTFLoader.js
In other words, put all the files for your project under somefolder. Then serve somefolder and load yourpage.html
Also new THREE.OrbitControls(... and new THREE.GLTFLoader(... become new OrbitControls(... and new GLTFLoader(.... You can see when you import them they are available directly, not on the THREE object.
I have been working through the basic cube exercise on Three.js, integrating the three.js cube into my Vue.JS application.
All was well, my cube rotated as planned using animate etc.
However, it all falls apart when I add OrbitControls.
I have tried three different versions of npm package: three-orbitcontrols, three-orbit-controls(THREE) and now orbit-controls-es6.
Regardless of which one I use, as soon as I remove comments in front of:
controls = new OrbitControls(camera, renderer.domElement) my screen canvas goes black...
I have included my code below so you can see what I have.
I've spent hours testing and searching today, but to no avail.
Hope someone can shine some light on my error.
Thanks all!
<template>
<div id="container"></div>
</template>
<script>
import * as Three from "three";
import OrbitControls from 'orbit-controls-es6';
export default {
name: 'ThreeWindow',
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null
}
},
methods: {
init() {
let container = document.getElementById('container');
this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
this.camera.position.z = 1;
this.scene = new Three.Scene();
let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
let material = new Three.MeshNormalMaterial();
this.mesh = new Three.Mesh(geometry, material);
this.scene.add(this.mesh);
//var controls = new OrbitControls(camera, renderer.domElement);
//This line here breaks the code and sends canvas black with no cube.
this.renderer = new Three.WebGLRenderer({antialias: true});
this.renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(this.renderer.domElement);
},
animate() {
requestAnimationFrame(this.animate);
//controls.update();
this.mesh.rotation.x += 0.01;
this.mesh.rotation.y += 0.02;
this.renderer.render(this.scene, this.camera);
}
},
mounted() {
this.init();
this.animate();
}
}
</script>
<style scoped>
#container {
width: 1000px;
height: 1000px;
}
</style>
[Cube Image Provided.][1]
[1]: https://i.stack.imgur.com/UwEEi.png
Agree with the previous answer, import orbit controls as follows - worked for me:
import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
But you have some other errors that are breaking it:
As you are working with a VueComponent object, you need to modify your camera and renderer variables that you pass in to the OrbitControls constructor with the this reference, so they are referring to the variables attached to your component,
So you need to replace
var controls = new OrbitControls(camera, renderer.domElement);
with
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
and move that line below the line where you declare the this.renderer
so you end up with:
this.renderer = new Three.WebGLRenderer({antialias: true});
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
then similarly in your animate() function,
replace controls.update() with this.controls.update()
you should import OrbitControl as below:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
First, check for errors in the browser console.
The first thing that pops out to me is the second argument you are sending to the OrbitControls constructor is renderer.domElement, but the renderer object is created after this line.
Try moving the OrbitControls call to after the renderer is created.
ie.
this.renderer = new Three.WebGLRenderer({antialias: true});
this.renderer.setSize(container.clientWidth, container.clientHeight);
var controls = new OrbitControls(camera, renderer.domElement); /*<-- moved to after renderer is created*/
I was experimenting with Three.js and Vue a couple of years back, You may find it interesting or helpful
I'm trying to display an OBJ 3D model as a wireframe that can be moved with OrbitControls using Three.js. I'm new with three.js, so I apologize if I'm missing something "obvious".
I've been able to get a cube to show as a wireframe with OrbitControls.
In a different setup, I was able to display the OBJ 3D model as a wireframe. Therefore, the issue isn't related to the 3D model.
The issue happens when I try to mix both approaches together.
I've tried to go about this in two ways:
I tried to insert the OBJLoader into the cube environment. (most promising)
I tried to add OrbitControls into the working, but unmovable, wireframe OBJ environment. (didn't really work at all)
Most of the other answers focus on the order of scripts: yes, I have tried to move the three.min.js, OrbitControls.js, OBJLoader.js, and my main working model.js into order and disorder, in every possible way.
Here's my code:
<head>
<style media="screen"> html, body { margin: 0; } #model_container { background-color: #333333; margin: 50px; } </style>
<title>OBJ Wireframe</title>
<script defer src="script/three/build/three.min.js"></script>
<script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
<script defer src="script/model.js"></script>
</head>
<body>
<div id="model_container"></div>
</body>
const globalWidth = window.innerWidth - 100;
const globalHeight = window.innerHeight - 100;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, globalWidth / globalHeight, 0.1, 1000);
camera.position.x = 300;
camera.position.y = -6;
camera.position.z = 1;
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setClearColor( 0xffffff, 0);
renderer.setSize(globalWidth, globalHeight);
const canvas = document.getElementById("model_container");
canvas.appendChild( renderer.domElement );
const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
const loader = new THREE.OBJLoader();
loader.load("assets/castle.obj", function(object) {
const geometry = object.children[0].geometry;
THREE.GeometryUtils.center(geometry);
const material = new THREE.MeshLambertMaterial({});
const mesh = new THREE.Mesh(geometry, material);
mesh.material.wireframe = true;
scene.add(mesh);
})
const controls = new THREE.OrbitControls(camera);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.1;
controls.target.set(0, 0, 0);
var animate = function () {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
Here are the errors I can't fix after 3 days of searching and trying everything I could:
OrbitControls.js:9: Uncaught SyntaxError: Unexpected token {
OBJLoader.js:5: Uncaught SyntaxError: Unexpected token {
Uncaught TypeError: THREE.OBJLoader is not a constructor at model.js:23
The errors seem to be rooted in the THREE.js files themselves, which I find very strange. I'm all out of ideas and documentation to go through.
I'm running this with MAMP, but have also tried uploading to a server to see if the issue is related to being local files or anything similar.
<script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
It seems you are loading the files from the wrong path. Files from the jsm directory are ES6 modules which are imported via ES6 import syntax. Try to include the files from the js directory:
<script defer src="script/three/examples/js/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/js/loaders/OBJLoader.js"></script>
three.js R106
I'm trying out Three.js, I followed a tutorial step-by-step. In the code editor I'm using( Visual Studio Code 2019) everything seems normal, but when I test it, nothing appears on the page.
the editor I'm using, used the desktop as the place to locate my code, since it is a .html file I could run it. When I did that, the only thing that appeared was the navbar I programmed, nothing else
This is the entire three.js code:
<script src="three.js-dev/build/three.min.js"> </script>
<script>
var scene = new THREE.scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight);
var renderer = new THREE.WebGLRenderer({antialias = true});
renderer.setSize( window.innerWidth, window.innerHeight);
$('body').append( renderer.domElement);
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial ( { color = 0xff0000 });
var cube = new THREE.Mesh( geometry, material) ;
scene.add( cube );
cube.position.z = -5;
var animate = function () {
cube.rotation.x += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate );
};
animate();
and this the code before it:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script
src="https://code.jquery.com/jquery-2.1.4.js"
integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4="
crossorigin="anonymous"></script>
</head>
<body>
<div id="navbar"><span>Three.js Tut</span></div>
I expected a red cube rotating, but nothing appeared. ¿Is there something I'm doing wrong?
You have a few errors in your code:
THREE.scene should be THREE.Scene
{antialias = true} should be {antialias: true}
{ color = 0xff0000 } should be { color: 0xff0000 }
Live demo with your code: https://jsfiddle.net/so736vxj/
BTW: If you are using VSCode, I'm a bit irritated that no errors are highlighted. Especially the last two syntax errors should be reported since it is no valid JavaScript.
three.js R105
Hi I am having problems importing models from blender in three.js.
At this moment I am using the last version of three.js (R71). I installed the exporter of three.js in blender and exports fine.
This is the code of HTML.
<body>
<font size="+6"><b>TFG</b></font><br>
Volver a atrás
<hr>
<div id='container'></div>
<script src="libs/ThreeJSV71/build/three.min.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="libs/Coordinates.js"></script>
<script src="libs/dat.gui.min.js"></script>
<script src="libs/stats.min.js"></script>
<script src="libs/ColladaLoader.js"></script>
<script src="threejs/tfg2.js"></script>
<br>
</body>
The next file is the tfg2.js where I load the model.
var width = window.innerWitdh,
height = window.innerHeight,
clock = new THREE.Clock(),
scene,
camera,
renderer,
ambientLight,
directionalLight,
loader,
modelo = new THREE.Object3D();
init();
function init()
{
scene =new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, width/height, 1000);
camera.position.set(0,1,5);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width,height);
renderer.setClearColor(new THREE.Color(0x0000AA));
document.getElementById('container').appendChild(renderer.domElement);
ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0,1,0);
scene.add(directionalLight);
scene.add(new THREE.GridHelper(10,1));
loader = new THREE.JSONLoader();
loader.load('blender/json/camara.json', function(geometry,materials)
{
modelo = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
scene.add(modelo);
});
}
When I try to see the results, nothing appear in the webpage and also de JavaScript console don't show any error. If I export the model with collada format and another .js that I have, I can see the model but I need use JSON.
What I am doing wrong?EDIT:
Added: modelo.position.set(0,0,0) inside the callback to be sure that the model is in origin.
Since there are no error what you can do:
While exporting the object from blender translate the object to origin. Go to origin>> select origin to geometry>> translate object to x, y, z to zero.
Now your camera see # position 0,1,5 xyz respectivily
Probably where your object camera is not looking
Or translate the child of scene to origin
Probably this solve your issue. As I see there are no error and warning in log.