I have some problems with the version switching of three.js .
I used to use these codes to load an stl file in three.js r69:
var loader = new THREE.STLLoader();
function initLoad() {
loader.addEventListener('load', function (event) {
var geometryOfFiles = event.content;
var materialOfFiles = new THREE.MeshPhongMaterial({
wrapAround: true,
wrapRGB: new THREE.Vector3(0, 1, 1),
color: 0xFFFFFF,
specular: 0xFFFFFF,
shading: THREE.SmoothShading,
shininess: 630,
fog: false,
side: THREE.DoubleSide
});
var object = new THREE.Mesh(geometryOfFiles, materialOfFiles);
object.position.set(0, 0, 0);
object.rotation.set(-Math.PI / 2, 0, Math.PI / 111);
object.scale.set(2, 2, 2);
scene.add(object);
});
loader.load('miku.stl');
}
But when I use the above in r73, I got this error message in browser console
Uncaught TypeError: loader.addEventListener is not a function
I didn't change anything in my file except the js version.It seems some method or function has been changed in r73.
Related
When I use three.js to load the stl model, the problem in the title always occurs. I have searched for a long time and have not found the corresponding solution. Here are some pictures of my problem：
const loader = new STLLoader();
// Binary files
const material = new THREE.MeshPhongMaterial({ color: 0xAAAAAA, specular: 0x111111, shininess: 200 });
loader.load('/pr2_head_pan.stl', function (geometry) {
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, - 0.37, - 0.6);
mesh.rotation.set(- Math.PI / 2, 0, 0);
mesh.scale.set(2, 2, 2);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
});
[https://i.stack.imgur.com/Mu4Qs.png][Project folder picture]
RangeError: Invalid typed array length: 17584072992
[https://i.stack.imgur.com/zVV6C.png][picture of error message]
Thank you for your help！
I have the following lights, the ambient light and one PointLight attached to the camera.
this.ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
var pointLight = new THREE.PointLight(0xffffff, 1);
//add to the camera/scene
this.camera.add(pointLight);
this.scene.add(this.ambientLight);
And I'm using the following meshes that I'm trying to give a metallic look, a sphere and a custom mesh that appears like a beam (here the code is simplified)!
//sphere
var sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 10, 10), material2);
//custom mesh
const shape = new THREE.Shape();
shape.moveTo(0,0);
shape.lineTo(0,1);
shape.lineTo(1,1);
shape.lineTo(1,0);
shape.lineTo(0,0);
const extrudeSettings = {
steps: width, // ui: steps
depth: width, // ui: depth
};
var geom = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var beam = new THREE.Mesh(geom , material);
And I've tested with the following materials:
const material = new THREE.MeshPhongMaterial(
{
flatShading: true,
emissive: 'grey',
color: 'grey',
shininess: 150,
side: THREE.DoubleSide,
});
const material2 = new THREE.MeshStandardMaterial({
metalness: 1,
emissive: 'grey',
color: 'grey',
side: THREE.DoubleSide,
flatShading: true,
});
I've tried messing around with the materials settings, but no luck! I want to obtain a metal finishing look, with shadows/depth, ideally using the MeshPhongMaterial!
At the moment, it looks like this:
Am I doing anything wrong with the lightning or with the materials?
How do I access the standard camera in the three.js editor? I am trying to make a scene with a portal, in the scene I have two cameras (one inside the cube map) to project the image into the portal. In the case of a local project, everything works fine for me, but in the case of creating a similar scene in the editor, everything goes down a bad path. It seems to me that the reason is that when you click on PLAY, a new camera is created. I attach the script of the scene below. I hope that a solution will be found.
var mainMover, otherMover;
var otherCamera;
var portalA, portalB;
var portalRing;
function init() {
otherCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
//console.log(this.children[3].children[0]);
let ambientLight = new THREE.AmbientLight(0xcccccc, 1.00);
scene.add(ambientLight);
deltaTime = 0;
totalTime = 0;
let loader = new THREE.TextureLoader();
let defaultMaterial = new THREE.MeshBasicMaterial({
map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/sphere-colored.png"),
color: 0x444444,
side: THREE.DoubleSide,
transparent: true
});
// Portal A ================================
portalA = new THREE.Mesh(
new THREE.CircleGeometry(1, 64),
defaultMaterial.clone()
);
portalA.material.opacity = 0.5;
portalA.position.set(-22, 0.5, -3);
portalA.rotation.y = Math.PI / 4;
portalA.layers.set(1);
scene.add(portalA);
portalRing = new THREE.Mesh(
new THREE.RingGeometry(1, 1.1, 64),
new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide, transparent: true })
);
portalRing.position.copy(portalA.position);
portalRing.rotation.copy(portalA.rotation);
portalRing.layers.set(0);
scene.add(portalRing);
mainMover = new THREE.Group();
mainMover.position.set(-21, 0.5, 0);
mainMover.add(camera);
mainMover.name = "mainMover";
scene.add(mainMover);
// Portal B - ================================
let skyMaterialArray2 = [
new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/posx.jpg"), side: THREE.BackSide }),
new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/negx.jpg"), side: THREE.BackSide }),
new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/posy.jpg"), side: THREE.BackSide }),
new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/negy.jpg"), side: THREE.BackSide }),
new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/posz.jpg"), side: THREE.BackSide }),
new THREE.MeshBasicMaterial({ map: loader.load("https://raw.githubusercontent.com/stemkoski/AR-Examples/master/images/mountain/negz.jpg"), side: THREE.BackSide }),
];
let skyMesh2 = new THREE.Mesh(
new THREE.BoxGeometry(30, 30, 30),
skyMaterialArray2);
skyMesh2.position.x = 20;
scene.add(skyMesh2);
portalB = new THREE.Mesh(
new THREE.CircleGeometry(1, 64),
defaultMaterial.clone()
);
portalB.material.opacity = 0.5;
portalB.position.set(24, 0.5, -5);
portalB.rotation.y = -Math.PI / 4;
portalB.layers.set(2);
scene.add(portalB);
otherMover = new THREE.Group();
otherMover.add(otherCamera);
scene.add(otherMover);
}
function update() {
portalRing.material.color.setHSL(totalTime / 10 % 1, 1, 0.75);
let relativePosition = portalA.worldToLocal(mainMover.position.clone());
otherMover.position.copy(portalB.localToWorld(relativePosition));
let relativeRotation = mainMover.quaternion.clone().multiply(portalA.quaternion.clone().invert());
otherMover.quaternion.copy(relativeRotation.multiply(portalB.quaternion));
otherCamera.rotation.x = camera.rotation.x;
render()
}
function render() {
camera.layers.enable(0);
camera.layers.enable(1);
renderer.render(scene, camera);
let gl = renderer.getContext();
renderer.clear(true, true, true);
renderer.autoClear = false;
// FIRST PASS (enable stencil buffer)
gl.enable(gl.STENCIL_TEST);
camera.layers.set(1);
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
gl.stencilMask(0xff);
gl.colorMask(false, false, false, false);
gl.depthMask(false);
renderer.render(scene, camera);
//SECOND PASS
let portalToCamera = new THREE.Vector3().subVectors(mainMover.position.clone(), portalA.position.clone()); // applyQuaternion( mainMover.quaternion );
let normalPortal = new THREE.Vector3(0, 0, 1).applyQuaternion(portalA.quaternion);
let clipSide = -Math.sign(portalToCamera.dot(normalPortal));
let clipNormal = new THREE.Vector3(0, 0, clipSide).applyQuaternion(portalB.quaternion);
let clipPoint = portalB.position;
let clipPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(clipNormal, clipPoint);
renderer.clippingPlanes = [clipPlane];
gl.colorMask(true, true, true, true);
gl.depthMask(true);
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
otherCamera.layers.set(0);
renderer.render(scene, otherCamera);
renderer.clippingPlanes = [];
//THIRD PASS
gl.disable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.depthMask(true);
renderer.clear(false, true, false);
renderer.render(scene, camera);
//FINAL PASS
gl.colorMask(true, true, true, true);
gl.depthMask(true);
camera.layers.set(0);
renderer.render(scene, camera);
renderer.autoClear = true;
}
UPDATE:
I added a helper for the camera, so the main camera should be in place of the cube. But, for some reason, when PLAYING, I find myself not in the place of this cube... (just create a mesh: let mainCameraMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial());
When you create a script in the three.js editor, you have access to certain global variables within the update() function. Next to the renderer and scene, you can also access the perspective camera. Just try this:
function update( event ) {
console.log( camera );
}
Apologies for asking this, but I am losing my mind.
In the context of a three.js scene I have built a cube with the following bit of code.
var gcap = new THREE.BoxGeometry( 10, 10, 1, 2, 2, 2 );
mcap = new THREE.MeshBasicMaterial( { color: 0x3182bd, wireframe: false, transparent: true, opacity: 0.5} );
cap = new THREE.Mesh( gcap, mcap );
cap.position.set( - 12, 19, 0 );
gcap.center();
cap.rotation.z = (28 * Math.PI)/180; //convert to radians
app.scene.add(cap);
So why does this tween not work (and by not working I mean there is not noticeable change in the scene):
new TWEEN.Tween(cap.position)
.to(-12, 19, 100 ).start();
but this one does:
new TWEEN.Tween(app.controls.target).to({
x: 31/2,
y: 29/2,
z: 11/2
}).start();
I realize this is probably a super-dumb question, but I'm new to tween (and really three.js in general).
In .to() you have to pass an object of the same structure that you pass in .Tween(), fully or partially. It depends on what values of the object you want to change.
And the second paremeter in .to() is duration.
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);
document.body.appendChild(renderer.domElement);
var box1 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
color: "red",
wireframe: true
}));
box1.position.set(-3, 0, 0);
scene.add(box1);
var box2 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
color: "blue",
wireframe: true
}));
box2.position.set(3, 0, 0);
scene.add(box2);
var tween1 = new TWEEN.Tween(box1.position) // here you pass the position {x, y, z}
.to({ // here you pass an object with properties you want to change (now you want to change all of them)
x: 1,
y: 3,
z: -2
}, 2000).delay(500).repeat(Infinity).yoyo(true).start();
var tween2 = new TWEEN.Tween(box2.position) // the same, position {x, y, z}
.to({ // but you want to change only y-coordinate, so you pass an object of {y}
y: 3
}, 1000).delay(500).repeat(Infinity).yoyo(true).start();
render();
function render() {
requestAnimationFrame(render);
TWEEN.update();
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
I'm pretty new to Three.js and I'm just trying to get some text to render. From looking at this code can someone tell me what I am doing wrong?
I have liked to my .json file through loader but I don't seem to get anything when I view the page in the browser.
<body>
<canvas id="myCanvas"></canvas>
<script src="js/three.js"></script>
<script type="text/javascript" src="js/helvetiker_regular.typeface.json"></script>
<script>
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x00ff00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
var scene = new THREE.Scene();
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
var light1 = new THREE.PointLight(0xffffff, 0.5);
scene.add(light1);
var loader = new THREE.FontLoader();
loader.load( 'js/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
} );
var material = new THREE.MeshLambertMaterial({color: 0xF3FFE2});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
requestAnimationFrame(render);
function render() {
mesh.rotation.x += .01;
mesh.rotation.y += .01;
renderer.render(scene, camera);
requestAnimationFrame(render);
};
</script>
</body>
The loader is asynchronous, and the function (callback) you give fires when the loading is done. Move your mesh creation inside the callback, and that should fix it.
loader.load( 'js/helvetiker_regular.typeface.json', function ( font ) {
var geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
var material = new THREE.MeshLambertMaterial({color: 0xF3FFE2});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
} );
P.S. You likely don't need this line:
<script type="text/javascript" src="js/helvetiker_regular.typeface.json"></script>
The loader will download the file on its own.