We Keep Coding

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') for vertices of three.js

So I'm converting an html project to a laravel/vue project.
The html file had a three.min.js file which I can not figure out the version of. And some custom script files.
I've imported all of them for my vue component.
I ran into different errors for the three.min.js file, so I npm installed version r69 of three.js becauseI read in recent versions, the geometry had changed.
One of the custom files, test.js is using three.js.
And I am running into the following error in my console.log
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
at test.js?t=1674045010699:37:39
test.js file code:
import * as THREE from "three";
// import ('../../assets/js/three.min.js')
// import "../js/anime.js"
// import "../js/three.js"
var canvas = document.querySelector("#scene");
var width = canvas.offsetWidth,
height = canvas.offsetHeight;
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(0x161d31);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100, width / height, 0.1, 10000);
camera.position.set(120, 0, 300);
var light = new THREE.HemisphereLight(0xffffff, 0x0c056d, 0.6);
scene.add(light);
var light = new THREE.DirectionalLight(0x590d82, 0.5);
light.position.set(100, 300, 400);
scene.add(light);
var light2 = light.clone();
light2.position.set(-100, 300, 400);
scene.add(light2);
var material = new THREE.MeshPhongMaterial({
emissive: 0x23f660,
emissiveIntensity: 0.4,
shininess: 0,
});
var geometry = new THREE.IcosahedronGeometry(120, 4);
for (var i = 0; i < geometry.vertices.length; i++) {
var vector = geometry.vertices[i];
vector._o = vector.clone();
}
var shape = new THREE.Mesh(geometry, material);
scene.add(shape);
function updateVertices(a) {
for (var i = 0; i < geometry.vertices.length; i++) {
var vector = geometry.vertices[i];
vector.copy(vector._o);
var perlin = noise.simplex3(
vector.x * 0.006 + a * 0.0002,
vector.y * 0.006 + a * 0.0003,
vector.z * 0.006
);
var ratio = perlin * 0.4 * (mouse.y + 0.3) + 0.9;
vector.multiplyScalar(ratio);
}
geometry.verticesNeedUpdate = true;
}
function render(a) {
requestAnimationFrame(render);
updateVertices(a);
renderer.render(scene, camera);
}
function onResize() {
canvas.style.width = "";
canvas.style.height = "";
width = canvas.offsetWidth;
height = canvas.offsetHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
var mouse = new THREE.Vector2(0.8, 0.5);
function onMouseMove(e) {
TweenMax.to(mouse, 0.8, {
y: e.clientY / height,
x: e.clientX / width,
ease: Power1.easeOut,
});
}
requestAnimationFrame(render);
window.addEventListener("mousemove", onMouseMove);
var resizeTm;
window.addEventListener("resize", function () {
resizeTm = clearTimeout(resizeTm);
resizeTm = setTimeout(onResize, 200);
});
I don't know anything about three.js, my main task here is to convert the entire project into vue/laravel so I have other things to worry about.
Does anyone know how to resolve this?

I've migrated the code to a more recent version of three.js. The code now uses BufferGeometry (the new geometry format) so the original runtime error is gone.
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x161d31);
const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(120, 0, 300);
const light = new THREE.HemisphereLight(0xffffff, 0x0c056d, 0.6);
scene.add(light);
const light1 = new THREE.DirectionalLight(0x590d82, 0.5);
light1.position.set(100, 300, 400);
scene.add(light1);
const light2 = light1.clone();
light2.position.set(-100, 300, 400);
scene.add(light2);
const material = new THREE.MeshLambertMaterial({
emissive: 0x23f660,
emissiveIntensity: 0.4
});
const geometry = new THREE.IcosahedronGeometry(120, 12);
const positionAttributeBase = geometry.getAttribute( 'position' ).clone();
const shape = new THREE.Mesh(geometry, material);
scene.add(shape);
const simplex = new THREE.SimplexNoise();
const vector = new THREE.Vector3();
function updateVertices(time) {
const positionAttribute = geometry.getAttribute('position');
for (let i = 0; i < positionAttributeBase.count; i++) {
vector.fromBufferAttribute(positionAttributeBase, i);
const noise = simplex.noise3d(
vector.x * 0.006 + time * 0.0002,
vector.y * 0.006 + time * 0.0003,
vector.z * 0.006
);
const ratio = noise * 0.4 + 0.9;
vector.multiplyScalar(ratio);
positionAttribute.setXYZ(i, vector.x, vector.y, vector.z)
}
positionAttribute.needsUpdate = true;
}
function animate(time=0) {
requestAnimationFrame(animate);
updateVertices(time);
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
animate();
body {
margin: 0px;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.147/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.147/examples/js/math/SimplexNoise.js"></script>

How to free-draw a line in three.js r144 on mouse move, and using BufferGeometry?

I'm using code from this repo - scribble, which is using three.js r87. I followed the Updating THREE.Geometry to THREE.BufferGeometry tutorial in order to upgrade the code to three.js r144. I've got one function correct, but the other one is giving me trouble.
The mousePressed function was easy to update:
function mousePressed() {
const point = new THREE.Vector3(mouseX, mouseY, 0);
// const geometry = new THREE.Geometry();
// geometry.vertices.push(point);
let points = [];
points.push(point);
let geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
scene.add(line);
selected = line;
}
But I updated mouseDragged(), and I don't understand why it's not working:
function mouseDragged() {
const line = selected;
const point = new THREE.Vector3(mouseX, mouseY, 0);
const oldgeometry = line.geometry;
// const newgeometry = new THREE.Geometry();
// newgeometry.vertices = oldgeometry.vertices;
// newgeometry.vertices.push(point);
let newgeometry = new THREE.BufferGeometry();
let positions = oldgeometry.attributes.position.array;
for (let i = 0; i < positions.length; i += 3) {
const v = new THREE.Vector3(positions[i], positions[i + 1], positions[i + 2]);
positions[i] = v.x;
positions[i + 1] = v.y;
positions[i + 2] = v.z;
}
positions.push(point); // I should just be able to add the new point, no?
newgeometry.attributes.position.needsUpdate = true;
line.geometry = newgeometry;
scene.add(line); // I re-added the line, just in case. But the line does not show up, whether or not I do this.
selected = line;
}
Help is much appreciated!
Thanks

The code from the resource is highly inefficient since you continuously allocate geometries all the time without disposal management which will lead to a memory leak. Try the following approach:
let camera, scene, renderer, line;
const frustumSize = 4;
let index = 0;
const coords = new THREE.Vector3();
init();
render();
function init() {
const aspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.1, 20);
camera.position.z = 5;
scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry();
const positionAttribute = new THREE.BufferAttribute(new Float32Array(1000 * 3), 3); // allocate large enough buffer
positionAttribute.setUsage(THREE.DynamicDrawUsage);
geometry.setAttribute('position', positionAttribute);
const material = new THREE.LineBasicMaterial()
line = new THREE.Line(geometry, material);
scene.add(line);
// initial points
addPoint(0, 0, 0); // start point
addPoint(1, 0, 0); // current pointer coordinate
//
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('pointerdown', onPointerDown);
renderer.domElement.addEventListener('pointermove', onPointerMove);
window.addEventListener('resize', onWindowResize);
}
function addPoint(x, y, z) {
const positionAttribute = line.geometry.getAttribute('position');
positionAttribute.setXYZ(index, x, y, z);
positionAttribute.needsUpdate = true;
index++;
line.geometry.setDrawRange(0, index);
}
function updatePoint(x, y, z) {
const positionAttribute = line.geometry.getAttribute('position');
positionAttribute.setXYZ(index - 1, coords.x, coords.y, 0);
positionAttribute.needsUpdate = true;
}
function onPointerDown(event) {
coords.x = (event.clientX / window.innerWidth) * 2 - 1;
coords.y = -(event.clientY / window.innerHeight) * 2 + 1;
coords.z = (camera.near + camera.far) / (camera.near - camera.far);
coords.unproject(camera);
addPoint(coords.x, coords.y, 0);
render();
}
function onPointerMove(event) {
coords.x = (event.clientX / window.innerWidth) * 2 - 1;
coords.y = -(event.clientY / window.innerHeight) * 2 + 1;
coords.z = (camera.near + camera.far) / (camera.near - camera.far);
coords.unproject(camera);
updatePoint(coords.x, coords.y, 0)
render();
}
function onWindowResize() {
const aspect = window.innerWidth / window.innerHeight;
camera.left = -frustumSize * aspect / 2;
camera.right = frustumSize * aspect / 2;
camera.top = frustumSize / 2;
camera.bottom = -frustumSize / 2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
renderer.render(scene, camera);
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.144/build/three.min.js"></script>
The idea is to allocate a single large buffer to store all current and future points of a line. You then use setDrawRange() to define, what parts of the buffer should be rendered.

ThreeJS: How to replace a cube mesh with a car mesh?

I developed a 3D cube that moves on one axis simulating the accelerometer sensor.
Currently, I have the .obj and .mtl of a toycar which I aim to add to the scene(), but when I remove the
BoxGeometry 3D cube and replace it with the car mesh I got these errors all the time:
I also get this error saying that obj is not defined, even if I defined it globally I still have the same issue:
I checked libraries that exist locally and other function but I can't see where is the problem.
Below is how I load the car model:
const scene = new THREE.Scene();
var loader = new THREE.OBJMTLLoader();
loader.load('https://jyunming-chen.github.io/tutsplus/models/toycar.obj', 'https://jyunming-chen.github.io/tutsplus/models/toycar.mtl',
function (vehicle) {
toycar = vehicle;
toycar.rotateY(-10.99);
scene.add(toycar);
});
and this is my full .HTML code with js implementation:
This is hoq looks like now:
and this is what I am aiming to achieve:
That's my current code:
<html>
<head>
<meta charset="UTF-8">
<script src="./three.min.js"></script>
<script src="./require.js" type="text/javascript"></script>
<script src="./OrbitControls.js"></script>
<script src="./KeyboardState.js"></script>
<script src="./MTLLoader.js"></script>
<script src="./OBJMTLLoader.js"></script>
<script type="module"> import * as THREE from "./three.module.js"</script>
</head>
<body>
<canvas id="canvas" width="1000" height="600" style="border:1px solid #000000;"></canvas>
</body>
<script>
let sensorValue = 0;
let sensorAddr = 0;
var toycar;
StartRetrieveLiveData();
function main() {
const canvas = document.querySelector('#canvas');
const accelPanel = document.querySelector('#accelPanel');
const renderer = new THREE.WebGLRenderer({ alpha: true, canvas });
renderer.setClearColor( 0x626d73, 1 );
var context = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
const fov = 70;
const aspect = 2;
const near = 20;
const far = 500;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 50, 1.5);
camera.up.set(0, 0, 1);
camera.lookAt(0, 0, 0);
const scene = new THREE.Scene();
// var loader = new THREE.OBJMTLLoader();
// loader.load('https://jyunming-chen.github.io/tutsplus/models/toycar.obj', 'https://jyunming-chen.github.io/tutsplus/models/toycar.mtl',
// function (vehicle) {
// toycar = vehicle;
// toycar.rotateY(-10.99);
// scene.add(toycar);
// });
// An array of objects who's rotation to update
const objects = [];
const radius = 3;
const widthSegments = 3;
const heightSegments = 3;
const sphereGeometry = new THREE.BoxGeometry(radius, widthSegments, heightSegments);
const sunMaterial = new THREE.MeshBasicMaterial({ color: "green", wireframe: false });
const object = new THREE.Mesh(sphereGeometry, sunMaterial);
var cubeAxis = new THREE.AxesHelper(10);
object.add(cubeAxis);
object.scale.set(2, 2, 2);
scene.add(object);
objects.push(object);
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render() {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
objects.forEach((obj) => {
sensorValueIndex = ((sensorValue / 16384) * 10);
obj.position.z = ((sensorValue / 16384) * 20);
console.log("AccX: ",sensorValueIndex);
// // Here I take accelerometerX and pass them to the 3D model
// if (sensorAddr === 1) {
// }
});
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
function onMsg(event) {
// console.log(`[message] Data received from server: ${event.data}`);
// console.log("event.data = " + JSON.parse(event.data));
var received_msg = event.data;
var obj = JSON.parse(JSON.parse(received_msg));
if (obj !== null) {
if (
obj.hasOwnProperty("DataMapChangedObjectsAddressValue") &&
obj["DataMapChangedObjectsAddressValue"][0]["DataMapAddress"] !==
undefined
) {
sensorAddr =
obj["DataMapChangedObjectsAddressValue"][0]["DataMapAddress"];
sensorValue =
obj["DataMapChangedObjectsAddressValue"][0]["Value"];
// if (sensorAddr === 1) {
// sensorValueIndex = (sensorValue / 16384) * 500;
// }
}
}
}
function onOpen(e) {
console.log("SSE connected");
}
function onError(e) {
// console.log(`[error] ${error.message}`);
if (e.eventPhase == EventSource.CLOSED) this.source.close();
if (e.target.readyState == EventSource.CLOSED) {
console.log("SSE Disconnected");
} else if (e.target.readyState == EventSource.CONNECTING) {
console.log("SSE Connecting ...");
}
}
function StartRetrieveLiveData() {
if (!!window.EventSource) {
this.source = new EventSource("/sse");
} else {
console.log("Your browser doesn't support SSE");
}
this.source.addEventListener("message", e => this.onMsg(e));
this.source.addEventListener("open", e => this.onOpen(e), false);
this.source.addEventListener("error", e => this.onError(e), false);
// Add here (only mozilla)
main();
// Add here
}
</script>
</html>
Note that when I used a public server the whole thing works just fine, but I used the remote server (the actual server) I get these error and the whole thing doesn't work as expected.
Would appreciate a solution for this.

I solved the problem so I am going to answer this.
Firstly, the document.querySelector('#canvas') should be removed to avoid creating two canvas, because I am calling the libraries in the . This was a silly mistake but I found it finally.
Secondly, the camera position was off and it wasn't really pointing at the car so nothing was shown on the screen. I tweaked the camera.position on the X, Y and Z axis to get it right.
There were bunches of other silly mistakes I found while carefully debugging the code, I am not an expert in the language yet so these mistakes serve as a learning experience for me.
The final working code is below:
let sensorValue = 0;
var toycar;
StartRetrieveLiveData();
var scene, renderer, camera;
var controls, keyboard = new KeyboardState();
var toycar;
function init() {
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(0x626d73, 1);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(10, width / height, 1, 10000);
camera.position.y = -150;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var loader = new THREE.OBJMTLLoader();
loader.load('./toycar.obj', './toycar.mtl',
function (object) {
toycar = object;
toycar.rotateZ(10.99); //toycar.rotateZ(-10.99);
scene.add(toycar);
});
var gridXZ = new THREE.GridHelper(350000, 10000);
gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
scene.add(gridXZ);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(350, 20, 5);
scene.add(pointLight);
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function animate() {
var angle = 0;
var speed = 0;
var pos = new THREE.Vector3(0, 0, 0);
var clock = new THREE.Clock();
var dt = clock.getDelta();
var dir = new THREE.Vector3(1, 0, 0);
dir.multiplyScalar(dt * speed);
dir.applyAxisAngle(new THREE.Vector3(0, 0, 0), 10);
pos.add(dir);
if (toycar != undefined) {
sensorValueIndex = ((sensorValue / 16384) * 50);
toycar.scale.set(0.1, 0.1, 0.1);
toycar.position.x = sensorValueIndex;
toycar.position.y = 0;
toycar.position.z = 0;
toycar.rotation.x = (angle + Math.PI);
}
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function onMsg(event) {
var received_msg = event.data;
var obj = JSON.parse(JSON.parse(received_msg));
if (obj !== null) {
if (
obj.hasOwnProperty("DataMapChangedObjectsAddressValue") &&
obj["DataMapChangedObjectsAddressValue"][0]["DataMapAddress"] !==
undefined
) {
let sensorAddr =
obj["DataMapChangedObjectsAddressValue"][0]["DataMapAddress"];
sensorValue =
obj["DataMapChangedObjectsAddressValue"][0]["Value"];
if (sensorAddr === 1) {
sensorValueIndex = (sensorValue / 16384) * 10;
console.log(sensorValueIndex);
}
}
}
}

Javascript Issues. Not working in a class section

I got this javascript code from somewhere, but i'm not sure how assigning js codes to classes work. I'm not so good with Js..any help will be greatly appreciated.
I would like for the js to be assigned to the 'intro-section' class. Its 3D butterfly animation.
Initially though, I wanted it to be assigned to an entire page..and maybe make it stick to the back and not move when the page scrolls down.
Index.html
<!-- Intro section start -->
<section class="intro-section sp-pad spad" id="demo">
<div class="container-fluid">
<div class="row">
<div class="col-xl-5 intro-text">
<span class="sp-sub-title">Play, Learn & Grow Together.</span>
<h3 class="sp-title">Welcome To Bright Beginnings</h3>
<p>The atmosphere of the school will be relaxed and will encourage freedom of expression as a means
to individual growth. Children should be free to be children – to act, choose, explore, test,
investigate, react, and experiment. Hence, children grow naturally in their new awareness of
themselves, their relationships towards/with others, and with the world around them.</p>
Read More
</div>
<div class="col-xl-6 offset-xl-1">
<figure class="intro-img mt-5 mt-xl-0">
<img src="img/intro.jpg" alt="">
</figure>
</div>
</div>
</div>
</section>
<!-- Intro section end -->
Javascript:
const nbButterflies = 100;
var conf, scene, camera, cameraCtrl, light, renderer;
var whw, whh;
var butterflies;
var bodyTexture, wingTexture1, wingTexture2, wingTexture3, bodyTexture4, wingTexture4;
var destination = new THREE.Vector3();
var mouse = new THREE.Vector2();
var mouseOver = false;
var mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var mousePosition = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
function init() {
conf = {
attraction: 0.03,
velocityLimit: 1.2,
move: true,
followMouse: true,
shuffle: shuffle
};
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
cameraCtrl = new THREE.OrbitControls(camera);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
initScene();
const gui = new dat.GUI();
gui.add(conf, 'move');
gui.add(conf, 'followMouse');
gui.add(conf, 'attraction', 0.01, 0.1);
gui.add(conf, 'velocityLimit', 0.1, 2);
gui.add(conf, 'shuffle');
gui.close();
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onMouseMove, false);
// document.addEventListener('mouseover', function () { mouseOver = true; }, false);
document.addEventListener('mouseout', function () { mouseOver = false; }, false);
animate();
};
function initScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera.position.z = 75;
bodyTexture = new THREE.TextureLoader().load('https://klevron.github.io/codepen/butterflies/b1.png');
wingTexture1 = new THREE.TextureLoader().load('https://klevron.github.io/codepen/butterflies/b1w.png');
wingTexture2 = new THREE.TextureLoader().load('https://klevron.github.io/codepen/butterflies/b2w.png');
wingTexture3 = new THREE.TextureLoader().load('https://klevron.github.io/codepen/butterflies/b3w.png');
bodyTexture4 = new THREE.TextureLoader().load('https://klevron.github.io/codepen/butterflies/b4.png');
wingTexture4 = new THREE.TextureLoader().load('https://klevron.github.io/codepen/butterflies/b4w.png');
butterflies = [];
for (var i = 0; i < nbButterflies; i++) {
var b = new Butterfly();
butterflies.push(b);
scene.add(b.o3d);
}
shuffle();
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
cameraCtrl.update();
if (conf.move) {
for (var i = 0; i < butterflies.length; i++) {
butterflies[i].move();
}
}
renderer.render(scene, camera);
};
function shuffle() {
for (var i = 0; i < butterflies.length; i++) {
butterflies[i].shuffle();
}
}
function Butterfly() {
this.minWingRotation = -Math.PI / 6;
this.maxWingRotation = Math.PI / 2 - 0.1;
this.wingRotation = 0;
this.velocity = new THREE.Vector3(rnd(1, true), rnd(1, true), rnd(1, true));
this.destination = destination;
var confs = [
{ bodyTexture: bodyTexture, bodyW: 10, bodyH: 15, wingTexture: wingTexture1, wingW: 10, wingH: 15, wingX: 5.5 },
{ bodyTexture: bodyTexture, bodyW: 6, bodyH: 9, wingTexture: wingTexture2, wingW: 15, wingH: 20, wingX: 7.5 },
{ bodyTexture: bodyTexture, bodyW: 8, bodyH: 12, wingTexture: wingTexture3, wingW: 10, wingH: 15, wingX: 5.5 },
{ bodyTexture: bodyTexture4, bodyW: 6, bodyH: 10, bodyY: 2, wingTexture: wingTexture4, wingW: 15, wingH: 20, wingX: 8 },
];
this.init(confs[Math.floor(rnd(4))]);
}
Butterfly.prototype.init = function (bconf) {
var geometry = new THREE.PlaneGeometry(bconf.wingW, bconf.wingH);
var material = new THREE.MeshBasicMaterial({ transparent: true, map: bconf.wingTexture, side: THREE.DoubleSide, depthTest: false });
var lwmesh = new THREE.Mesh(geometry, material);
lwmesh.position.x = -bconf.wingX;
this.lwing = new THREE.Object3D();
this.lwing.add(lwmesh);
var rwmesh = new THREE.Mesh(geometry, material);
rwmesh.rotation.y = Math.PI;
rwmesh.position.x = bconf.wingX;
this.rwing = new THREE.Object3D();
this.rwing.add(rwmesh);
geometry = new THREE.PlaneGeometry(bconf.bodyW, bconf.bodyH);
material = new THREE.MeshBasicMaterial({ transparent: true, map: bconf.bodyTexture, side: THREE.DoubleSide, depthTest: false });
this.body = new THREE.Mesh(geometry, material);
if (bconf.bodyY) this.body.position.y = bconf.bodyY;
// this.body.position.z = -0.1;
this.group = new THREE.Object3D();
this.group.add(this.body);
this.group.add(this.lwing);
this.group.add(this.rwing);
this.group.rotation.x = Math.PI / 2;
this.group.rotation.y = Math.PI;
this.setWingRotation(this.wingRotation);
this.initTween();
this.o3d = new THREE.Object3D();
this.o3d.add(this.group);
};
Butterfly.prototype.initTween = function () {
var duration = limit(conf.velocityLimit - this.velocity.length(), 0.1, 1.5) * 1000;
this.wingRotation = this.minWingRotation;
this.tweenWingRotation = new TWEEN.Tween(this)
.to({ wingRotation: this.maxWingRotation }, duration)
.repeat(1)
.yoyo(true)
// .easing(TWEEN.Easing.Cubic.InOut)
.onComplete(function(object) {
object.initTween();
})
.start();
};
Butterfly.prototype.move = function () {
var destination;
if (mouseOver && conf.followMouse) {
destination = mousePosition;
} else {
destination = this.destination;
}
var dv = destination.clone().sub(this.o3d.position).normalize();
this.velocity.x += conf.attraction * dv.x;
this.velocity.y += conf.attraction * dv.y;
this.velocity.z += conf.attraction * dv.z;
this.limitVelocity();
// update position & rotation
this.setWingRotation(this.wingRotation);
this.o3d.lookAt(this.o3d.position.clone().add(this.velocity));
this.o3d.position.add(this.velocity);
};
Butterfly.prototype.limitVelocity = function (y) {
this.velocity.x = limit(this.velocity.x, -conf.velocityLimit, conf.velocityLimit);
this.velocity.y = limit(this.velocity.y, -conf.velocityLimit, conf.velocityLimit);
this.velocity.z = limit(this.velocity.z, -conf.velocityLimit, conf.velocityLimit);
};
Butterfly.prototype.setWingRotation = function (y) {
this.lwing.rotation.y = y;
this.rwing.rotation.y = -y;
};
Butterfly.prototype.shuffle = function () {
this.velocity = new THREE.Vector3(rnd(1, true), rnd(1, true), rnd(1, true));
var p = new THREE.Vector3(rnd(1, true), rnd(1, true), rnd(1, true)).normalize().multiplyScalar(100);
this.o3d.position.set(p.x, p.y, p.z);
var scale = rnd(0.4) + 0.1;
this.o3d.scale.set(scale, scale, scale);
}
function limit(number, min, max) {
return Math.min(Math.max(number, min), max);
}
function rnd(max, negative) {
return negative ? Math.random() * 2 * max - max : Math.random() * max;
}
function onWindowResize() {
whw = window.innerWidth / 2;
whh = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onMouseMove(event) {
// if (cameraCtrl.getState()!=-1) return;
var v = new THREE.Vector3();
camera.getWorldDirection(v);
v.normalize();
// console.log(v);
mousePlane.normal = v;
mouseOver = true;
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(mousePlane, mousePosition);
}
init();

threejs, adding points to scene and not seeing them

Hello I have one doubt:
I have studied:
https://threejs.org/docs/#api/materials/PointsMaterial
And I have adapted the example to work with my existing code.
The aim is to render points on top of the model which we have loaded on click position.
Here we have the code, the important part is onDocumentMouseDown(), the file, logic.js:
if (!Detector.webgl) Detector.addGetWebGLMessage();
// global variables for this scripts
let OriginalImg,
SegmentImg;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var mousePressed = false;
var clickCount = 0;
init();
animate();
// initilize the page
function init() {
let filename = "models/nrrd/columna01.nrrd"; // change your nrrd file
let idDiv = 'original';
OriginalImg = new InitCanvas(idDiv, filename);
OriginalImg.init();
console.log(OriginalImg);
filename = "models/nrrd/columnasegmentado01.nrrd"; // change your nrrd file
idDiv = 'segment';
SegmentImg = new InitCanvas(idDiv, filename);
SegmentImg.init();
}
let originalCanvas = document.getElementById('original');
originalCanvas.addEventListener('mousedown', onDocumentMouseDown, false);
originalCanvas.addEventListener('mouseup', onDocumentMouseUp, false);
function onDocumentMouseDown(event) {
mousePressed = true;
clickCount++;
mouse.x = ( ( event.clientX - OriginalImg.renderer.domElement.offsetLeft ) / OriginalImg.renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = -( ( event.clientY - OriginalImg.renderer.domElement.offsetTop ) / OriginalImg.renderer.domElement.clientHeight ) * 2 + 1
console.log('Mouse x position is: ', mouse.x, 'the click number was: ', clickCount);
console.log('Mouse Y position is: ', mouse.y);
raycaster.setFromCamera(mouse.clone(), OriginalImg.camera);
var objects = raycaster.intersectObjects(OriginalImg.scene.children);
var pointGeometry = new THREE.Geometry();
var position = new THREE.Vector3();
position.x = objects[0].point.x;
position.y = objects[0].point.y;
position.z = objects[0].point.z;
pointGeometry.vertices.push(position);
var pointMaterial = new THREE.PointsMaterial({color: 0x888888});
var point = new THREE.Points(pointGeometry, pointMaterial);
OriginalImg.scene.add(point);
console.log(objects);
}
function onDocumentMouseUp(event) {
mousePressed = false
}
function animate() {
requestAnimationFrame(animate);
OriginalImg.animate();
SegmentImg.animate();
}
And we do add the points to the scene, but in fact they do not render, they do not show, and I wonder why?:
As you could see in the image we see that the raycaster intercepts those new created points, however the do not get drawn.
I wonder if they are too small, or just the color hides them with the background.
Could you help me please?.
Additional code:
// this class handles the load and the canva for a nrrd
// Using programming based on prototype: https://javascript.info/class
// This class should be improved:
// - Canvas Width and height
InitCanvas = function (IdDiv, Filename) {
this.IdDiv = IdDiv;
this.Filename = Filename
}
InitCanvas.prototype = {
constructor: InitCanvas,
init: function () {
this.container = document.getElementById(this.IdDiv);
// this should be changed.
debugger;
this.container.innerHeight = 600;
this.container.innerWidth = 800;
//These statenments should be changed to improve the image position
this.camera = new THREE.PerspectiveCamera(60, this.container.innerWidth / this.container.innerHeight, 0.01, 1e10);
this.camera.position.z = 300;
let scene = new THREE.Scene();
scene.add(this.camera);
// light
let dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(200, 200, 1000).normalize();
this.camera.add(dirLight);
this.camera.add(dirLight.target);
// read file
let loader = new THREE.NRRDLoader();
loader.load(this.Filename, function (volume) {
//z plane
let sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));
debugger;
this.container.innerWidth = sliceZ.iLength;
this.container.innerHeight = sliceZ.jLength;
sliceZ.mesh.material.color.setRGB(0,1,1);
console.log('Our slice is: ', sliceZ);
scene.add(sliceZ.mesh);
}.bind(this));
this.scene = scene;
// renderer
this.renderer = new THREE.WebGLRenderer({alpha: true});
this.renderer.setPixelRatio(this.container.devicePixelRatio);
debugger;
this.renderer.setSize(this.container.innerWidth, this.container.innerHeight);
// add canvas in container
this.container.appendChild(this.renderer.domElement);
},
animate: function () {
this.renderer.render(this.scene, this.camera);
}
}
I wonder about the point size because if we see this example they are made with 0.05 of size:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_raycasting_points.html
And in the example we see the camera being quite far away from the points being generated and they are visible:
https://threejs.org/examples/webgl_interactive_raycasting_points.html
What do you think?

You can use THREE.BufferGeometry() with .setDrawRange():
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 5, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(3, 32, 24), new THREE.MeshBasicMaterial({
wireframe: true,
color: "red"
}));
scene.add(mesh);
var idx = 0;
var maxIdx = 10;
var points = [];
for (let i = 0; i < maxIdx; i++) {
points.push(new THREE.Vector3());
}
var geometry = new THREE.BufferGeometry().setFromPoints(points);
geometry.setDrawRange(0, idx);
var points = new THREE.Points(geometry, new THREE.PointsMaterial({
size: 0.125,
color: "yellow"
}));
scene.add(points);
window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("mousedown", onMouseDown, false);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
function onMouseDown(event) {
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObject(mesh);
if (intersects.length === 0) return;
if (idx == maxIdx) return;
let p = intersects[0].point;
geometry.attributes.position.setXYZ(idx, p.x, p.y, p.z);
geometry.attributes.position.needsUpdate = true;
idx++;
geometry.setDrawRange(0, idx);
}
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>