We Keep Coding

three.js Not working orbit around Parent Node

import * as THREE from "three";
// // Canvas
const canvas = document.querySelector("canvas.webgl");
// // Scene
const scene = new THREE.Scene();
// Renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
});
renderer.setSize(1200, 800);
const objects = [];
const radius = 1;
const widthSegments = 6;
const heightSegments = 6;
const sphereGeometry = new THREE.SphereGeometry(
radius,
widthSegments,
heightSegments
);
const solarSystem = new THREE.Object3D();
scene.add(solarSystem);
objects.push(solarSystem);
const sunMaterial = new THREE.MeshPhongMaterial({ emissive: "red" });
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
sunMesh.scale.set(5, 5, 5);
solarSystem.add(sunMesh);
objects.push(sunMesh);
const EarthSystem = new THREE.Object3D();
solarSystem.add(EarthSystem);
objects.push(EarthSystem);
const earthMaterial = new THREE.MeshPhongMaterial({ emissive: "blue" });
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
earthMesh.position.x = 20;
earthMesh.scale.set(2, 2, 2);
EarthSystem.add(earthMesh);
objects.push(earthMesh);
const MoonMaterial = new THREE.MeshPhongMaterial({ emissive: "gray" });
const moonMesh = new THREE.Mesh(sphereGeometry, MoonMaterial);
EarthSystem.add(moonMesh);
moonMesh.position.x = 25;
objects.push(moonMesh);
/**
* Sizes
*/
const sizes = {
width: 1200,
height: 800,
};
/**
* Camera
*/
const camera = new THREE.PerspectiveCamera(
60,
sizes.width / sizes.height,
0.1,
500
);
camera.position.set(0, 50, 0);
camera.up.set(0, 0, 1);
camera.lookAt(0, 0, 0);
scene.add(camera);
// /**
// * Renderer
// */
function animate() {
requestAnimationFrame(animate);
objects.forEach((obj) => {
obj.rotation.y += 0.007;
});
renderer.render(scene, camera);
}
animate();
I am making solar system. In center I make Sun add in SolarSystem first. And then I make EarthSystem and add in SolarSystem. Earth in EarthSystem and normally orbit around Sun. But I have problem in Moon. I make Moon and add in EarthSystem but not orbit around earth only around Sun with earth. How can I solve this problem?

Three.js create face from 3 coordinates

I have code in place to create load, render and display a STL object using Vue.js and Three.js.
I want to render a new face in place of the plane I am currently racasting to. I have already found a way to get the 3 vertices of the mous-overed (Clicked on) face (aVertex, bVertex, cVertex).
Now I want to render a triangle in this position (with a different color), but to be honest I have no idea how. I have tried googling it, but with no luck yet (I am very unfamiliar with 3d and rendering in general). Can someone give me a push in the right direction?
<template>
<div id="scene-container" ref="sceneContainer" class="scene-container"></div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
export default {
name: "HelloWorld",
data() {
return {
container: null,
scene: null,
camera: null,
controls: null,
renderer: null,
stats: null,
mouse: null,
raycaster: null,
objName: "testobj",
};
},
methods: {
init() {
// set container
this.container = this.$refs.sceneContainer;
// add raycaster
this.raycaster = new THREE.Raycaster();
this.mouse = new THREE.Vector2();
const onMouseClick = (event) => {
event.preventDefault();
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// update the picking ray with the camera and mouse position
};
window.addEventListener("mousedown", onMouseClick, false);
// add camera
const fov = 60; // Field of view
const aspect = this.container.clientWidth / this.container.clientHeight;
// const near = 0.1; // the near clipping plane
// const far = 3000; // the far clipping plane
const camera = new THREE.PerspectiveCamera(fov, aspect);
camera.position.set(0, 20, 75);
this.camera = camera;
// create scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xdddddd);
// add lights
const ambientLight = new THREE.HemisphereLight(
0xffffff, // bright sky color
0x222222, // dim ground color
1 // intensity
);
const mainLight = new THREE.DirectionalLight(0xffffff, 4.0);
mainLight.position.set(10, 10, 10);
this.scene.add(ambientLight, mainLight);
let hlight = new THREE.AmbientLight(0xffffff, 1.3);
this.scene.add(hlight);
//Add some point lights to simulate real lights
let light = new THREE.PointLight(0xffffff, 1, 1000);
light.position.set(0, 300, 500);
this.scene.add(light);
// add controls
this.controls = new OrbitControls(this.camera, this.container);
// create renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(
this.container.clientWidth,
this.container.clientHeight
);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.gammaFactor = 2.2;
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.physicallyCorrectLights = true;
document
.getElementById("scene-container")
.appendChild(this.renderer.domElement);
// set aspect ratio to match the new browser window aspect ratio
this.camera.aspect =
this.container.clientWidth / this.container.clientHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(
this.container.clientWidth,
this.container.clientHeight
);
let me = this;
let loader = new STLLoader();
let mesh = new THREE.Object3D();
loader.load("/three-assets/RobotExpressive.stl", function (geometry) {
// console.log(geometry);
let material = new THREE.MeshLambertMaterial({
color: 0x1313,
wireframe: false,
transparent: false,
vertexColors: false,
});
mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = -0.5 * Math.PI;
mesh.position.set(0, 0, 0);
mesh.name = me.objName;
me.scene.add(mesh);
});
window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
me.camera.aspect = window.innerWidth / window.innerHeight;
me.camera.updateProjectionMatrix();
me.renderer.setSize(window.innerWidth, window.innerHeight);
}
this.renderer.setAnimationLoop(() => {
this.render();
});
},
render() {
this.raycaster.setFromCamera(this.mouse, this.camera);
this.intersects = this.raycaster.intersectObjects(this.scene.children);
// window.addEventListener( 'mousemove', onMouseMove, false );
if (this.intersects.length > 1) {
// this.intersects[0].object.material.color.set(0xff);
for (let i = 0; i < this.intersects.length; i++) {
if (this.intersects[i].object.name == "testobj") {
let positionAttribute = this.intersects[i].object.geometry
.attributes["position"];
let intersection = this.intersects[i];
let aVertex = new THREE.Vector3(
positionAttribute.getX(intersection.face.a),
positionAttribute.getY(intersection.face.a),
positionAttribute.getZ(intersection.face.a)
);
let bVertex = new THREE.Vector3(
positionAttribute.getX(intersection.face.b),
positionAttribute.getY(intersection.face.b),
positionAttribute.getZ(intersection.face.b)
);
let cVertex = new THREE.Vector3(
positionAttribute.getX(intersection.face.c),
positionAttribute.getY(intersection.face.c),
positionAttribute.getZ(intersection.face.c)
);
console.log(aVertex, bVertex, cVertex);
}
}
}
this.renderer.render(this.scene, this.camera);
},
},
mounted() {
this.init();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
#scene-container {
height: 99.8%;
}
</style>

Example (for picking meshes with BufferGeometry):
// initital setup:
let lineGeometry = new THREE.BufferGeometry();
let linePositionAttribute = new THREE.BufferAttribute(new Float32Array(4 * 3), 3);
lineGeometry.addAttribute('position', linePositionAttribute);
let lineMaterial = new THREE.LineBasicMaterial(
{
color: 0xff0000
});
var intersectionFaceEdge = new THREE.Line(lineGeometry, lineMaterial);
scene.add(intersectionFaceEdge);
// ... on each raycasting:
let face = intersection.face;
let obj = intersection.object;
let positionAttribute = obj.geometry.attributes['position'];
linePositionAttribute.copyAt(0, positionAttribute, face.a);
linePositionAttribute.copyAt(1, positionAttribute, face.b);
linePositionAttribute.copyAt(2, positionAttribute, face.c);
linePositionAttribute.copyAt(3, positionAttribute, face.a);
lineGeometry.applyMatrix(obj.matrixWorld);
And I recommend using GPU picking instead of simple raycasting

Three.js - Canvas Element not displaying properly. Just see black box

I am relatively new to three.js and I am trying to replicate the following code block I found on Observable inside of a fiddle.
https://observablehq.com/#bumbeishvili/three-js-wooden-bar-chart
When I run the code, all I see is a giant black box. I thought I added the group materials and light elements properly to the scene but all that renders is blackness. Any help would be immensely appreciated.
Here is my code:
canvas {
display: block;
}
initiateThree();
function initiateThree() {
data = [
[3,2,1],
[6,5,4],
[8,7,6],
]
var i =1;
height = 500
fov = 18
//aspect = width / height
aspect = 500 / 500
near = 0.1
far = 1000
loader = new THREE.TextureLoader()
function update() {
//cubeGroup.rotation.x += 0.001;
cubeGroup.rotation.y += 0.001;
//cubeGroup.rotation.z += 0.001;
}
function render(scene) {
renderer.render(scene, camera);
}
const scene = new THREE.Scene(); // ADDED
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-4, 1, 4);
//max = Math.max.apply(Math, data.map(d=>Math.max.apply(this,d)))
cubeGeometries = data.map(row=>{
return row.map(c=>{
//return new THREE.BoxGeometry( 0.2, c/max, 0.2 );
return new THREE.BoxGeometry( 0.2, c/8, 0.2 );
})
})
const cubeMaterial = new THREE.MeshStandardMaterial({
map:loader.load('https://threejsfundamentals.org/threejs/lessons/resources/
images/compressed-but-large-wood-texture.jpg')
});
cubeMaterial.color.convertSRGBToLinear();
const cubeMeshes = cubeGeometries.map(row=>{
return row.map(cubeGeometry => new THREE.Mesh( cubeGeometry, cubeMaterial ))
})
const cubeGroup = new THREE.Group();
data.forEach((row,i,iarr)=>{
row.forEach((d,j,jarr)=>{
cubeMeshes[i][j].position.set(
i/iarr.length-0.5,
//d/max*0.5-0.6,
d/8*0.5-0.6,
j/jarr.length-0.5);
//cubeMeshes[i][j].scale.set(1,4,1);
cubeGroup.add(cubeMeshes[i][j]);
})
})
const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
mainLight.position.set(10, 10, 10);
const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);
//scene.add(cubeMeshes); //Not This One?
scene.add(cubeGroup);
scene.add(mainLight);
scene.add(ambientLight);
const renderer = new THREE.WebGLRenderer({
antialias: true
});
//renderer.setSize(width, height);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
document.body.appendChild( renderer.domElement ); //ADDED
}
Here is my fiddle:
https://jsfiddle.net/bullybear/m826gkrt/326/

A few things are missing in your code:
There is no animation loop.
The camera does not look at the boxes.
Also upgraded to the latest version of three.js (r118) and removed legacy code.
let scene, camera, renderer;
let cubeGroup;
init();
animate();
function init() {
const data = [
[3, 2, 1],
[6, 5, 4],
[8, 7, 6],
]
var i = 1;
height = 500
fov = 18
//aspect = width / height
aspect = 500 / 500
near = 0.1
far = 1000
loader = new THREE.TextureLoader()
scene = new THREE.Scene(); // ADDED
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-4, 1, 4);
camera.lookAt( scene.position );
//max = Math.max.apply(Math, data.map(d=>Math.max.apply(this,d)))
cubeGeometries = data.map(row => {
return row.map(c => {
//return new THREE.BoxGeometry( 0.2, c/max, 0.2 );
return new THREE.BoxBufferGeometry(0.2, c / 8, 0.2);
})
})
const cubeMaterial = new THREE.MeshStandardMaterial({
map: loader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
});
cubeMaterial.color.convertSRGBToLinear();
const cubeMeshes = cubeGeometries.map(row => {
return row.map(cubeGeometry => new THREE.Mesh(cubeGeometry, cubeMaterial))
})
cubeGroup = new THREE.Group();
data.forEach((row, i, iarr) => {
row.forEach((d, j, jarr) => {
cubeMeshes[i][j].position.set(
i / iarr.length - 0.5,
//d/max*0.5-0.6,
d / 8 * 0.5 - 0.6,
j / jarr.length - 0.5);
//cubeMeshes[i][j].scale.set(1,4,1);
cubeGroup.add(cubeMeshes[i][j]);
})
})
const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
mainLight.position.set(10, 10, 10);
const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);
scene.add(cubeGroup);
scene.add(mainLight);
scene.add(ambientLight);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.physicallyCorrectLights = true;
document.body.appendChild(renderer.domElement); //ADDED
}
function animate() {
requestAnimationFrame( animate );
cubeGroup.rotation.y += 0.001;
renderer.render( scene, camera );
}
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.118.3/build/three.js"></script>

three.js raycast on skinning mesh

I'm trying to raycast skinning mesh (of knowing issue) after some skeleton changes (without animation on it, so performance isn't a priority).
The tricky thing i imagine in this attempt is:
Load skinned mesh add to scene
Make some changes in positions of specific bones at loaded mesh
Copy geometries of transformed loaded mesh (maybe from buffer?)
Create new mesh (some kind of imitation ghost mesh) from copied geometries and apply to it
set raycast on ghost mesh with opacity material= 0.0
Above list should work, but I'm stuck third day on point 3 cause I can't get transformed vertices after skinning.
var scene, camera, renderer, mesh, ghostMesh;
var raycaster = new THREE.Raycaster();
var raycasterMeshHelper;
initScene();
render();
function initScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.set(20, 7, 3);
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, false);
var orbit = new THREE.OrbitControls(camera, renderer.domElement);
//lights stuff
var ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
var lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
//raycaster mesh
var raycasterMaterial = new THREE.MeshBasicMaterial({
color: 0xdddddd,
opacity: 0.7,
transparent: true
});
var geometrySphere = new THREE.SphereGeometry(0.5, 16, 16);
raycasterMeshHelper = new THREE.Mesh(geometrySphere, raycasterMaterial);
raycasterMeshHelper.visible = false;
scene.add(raycasterMeshHelper);
renderer.domElement.addEventListener('mousemove', onMouseMove, false);
//model Loading
var loader = new THREE.JSONLoader();
loader.load("https://raw.githubusercontent.com/visus100/skinnedTests/master/js_fiddle/skinned_mesh.json", function(geometry) {
var meshMaterial = new THREE.MeshStandardMaterial({
color: 0x00df15,
skinning: true
});
mesh = new THREE.SkinnedMesh(geometry, meshMaterial);
scene.add(mesh);
var skeleton = new THREE.SkeletonHelper(mesh);
scene.add(skeleton);
//some experimental skeletonal changes
mesh.skeleton.bones[1].rotation.z += 0.10;
mesh.skeleton.bones[2].rotation.x += -0.65;
mesh.skeleton.bones[3].rotation.y += -0.45;
mesh.skeleton.bones[3].position.x += 0.11;
//updates matrix
mesh.updateMatrix();
mesh.geometry.applyMatrix(mesh.matrix);
mesh.updateMatrixWorld(true);
//crate ghost mesh geometry
createGhostMesh();
//crate point cloud helper from buffergeometry
var bufferGeometry = new THREE.BufferGeometry().fromGeometry(mesh.geometry);
var particesMaterial = new THREE.PointsMaterial({
color: 0xff00ea,
size: 0.07,
sizeAttenuation: false
});
particles = new THREE.Points(bufferGeometry, particesMaterial);
particles.sortParticles = true;
scene.add(particles);
});
}
function createGhostMesh() {
var geometryForGhostMesh = new THREE.Geometry();
//push vertices and other stuff to geometry
for (i = 0; i < mesh.geometry.vertices.length; i++) {
var temp = new THREE.Vector3(mesh.geometry.vertices[i].x, mesh.geometry.vertices[i].y, mesh.geometry.vertices[i].z);
geometryForGhostMesh.vertices.push(temp);
//////
//here should be the code for calc translation vertices of skinned mesh and added to geometryForGhostMesh
//////
geometryForGhostMesh.skinIndices.push(mesh.geometry.skinIndices[i]);
geometryForGhostMesh.skinWeights.push(mesh.geometry.skinWeights[i]);
}
for (i = 0; i < mesh.geometry.faces.length; i++) {
geometryForGhostMesh.faces.push(mesh.geometry.faces[i]);
}
//create material and add to scene
var ghostMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
opacity: 0.1,
transparent: true,
skinning: true
});
ghostMesh = new THREE.Mesh(geometryForGhostMesh, ghostMaterial);
scene.add(ghostMesh);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
function onMouseMove(event) {
//raycaster for ghostMesh
if (ghostMesh) {
var rect = renderer.domElement.getBoundingClientRect();
var mouseX = ((event.clientX - rect.left) / rect.width) * 2 - 1;
var mouseY = -((event.clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);
var intersects = raycaster.intersectObject(ghostMesh);
if (intersects.length > 0) {
raycasterMeshHelper.visible = true;
raycasterMeshHelper.position.set(0, 0, 0);
raycasterMeshHelper.lookAt(intersects[0].face.normal);
raycasterMeshHelper.position.copy(intersects[0].point);
} else {
raycasterMeshHelper.visible = false;
}
}
}
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Please note that I need this in thre.js build r98 or less, because the rest of my code (not included here) and without morph tangents only skinning bones.
I tried to write it clearly and please if anyone want help do it so because I'm not a pro.
I not including my approach of calculating transformed geometries because I failed too hard.
I dug a lot about this problem here e.g. issue6440 and for today it's still not fixed.
But there existing methods to work with it e.g https://jsfiddle.net/fnjkeg9x/1/ but after several of attempts I failed and my conclusion is that the stormtrooper works on morph tanges and this could be the reason I failed.
EDIT:
I created next codepen based on this topics get-the-global-position-of-a-vertex-of-a-skinned-mesh and Stormtrooper.
Decided to start with simple box to make bounding around skinned transformed mesh.
Result is fail because it giving 0 at line:
boneMatrix.fromArray(skeleton.boneMatrices, si * 16);
Here i comparing stormtrooper with my example output from console: Screen shot image
Codpen with new progress: https://codepen.io/donkeyLuck0/pen/XQbBMQ
My other idea is to apply this bones form loaded model and rig as a morph tangent programmatically (but i don't even know if it is possible and how to figure it out)
Founded example of animated model
Sketchfab animation with points tracking

This is super late to the game, but here's an example of GPU picking that works with skinned meshes and doesn't require a separate picking scene to keep in sync with your main scene, nor does it require the user to manage custom materials:
https://github.com/bzztbomb/three_js_gpu_picking
The trick that allows for easy material overriding and scene re-use is here:
https://github.com/bzztbomb/three_js_gpu_picking/blob/master/gpupicker.js#L58

A proper support for raycasting for skinned meshes was added in https://github.com/mrdoob/three.js/pull/19178 in revision 116.

You can use GPU picking to "pick" skinned object. It won't give you a position though
Note: GPU picking requires rendering every pickable object with a custom material. How you implement that is up to you. This article does it by making 2 scenes. That might not be as useful for skinned objects.
Unfortunately three.js provides no way to override materials AFAICT. Here's an example that replaces the materials on the pickable objects before rendering for picking and then restores them after. You would also need to hide any objects you don't want picked.
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: document.querySelector('canvas'),
});
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 200);
camera.position.set(20, 7, 3);
const orbit = new THREE.OrbitControls(camera, renderer.domElement);
//lights stuff
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
const lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
//raycaster mesh
const raycasterMaterial = new THREE.MeshBasicMaterial({
color: 0xdddddd,
opacity: 0.7,
transparent: true
});
const geometrySphere = new THREE.SphereGeometry(0.5, 16, 16);
raycasterMeshHelper = new THREE.Mesh(geometrySphere, raycasterMaterial);
raycasterMeshHelper.visible = false;
scene.add(raycasterMeshHelper);
//model Loading
const pickableObjects = [];
const loader = new THREE.JSONLoader();
loader.load("https://raw.githubusercontent.com/visus100/skinnedTests/master/js_fiddle/skinned_mesh.json", (geometry) => {
const meshMaterial = new THREE.MeshStandardMaterial({
color: 0x00df15,
skinning: true
});
const mesh = new THREE.SkinnedMesh(geometry, meshMaterial);
scene.add(mesh);
const id = pickableObjects.length + 1;
pickableObjects.push({
mesh,
renderingMaterial: meshMaterial,
pickingMaterial: new THREE.MeshPhongMaterial({
skinning: true,
emissive: new THREE.Color(id),
color: new THREE.Color(0, 0, 0),
specular: new THREE.Color(0, 0, 0),
//map: texture,
//transparent: true,
//side: THREE.DoubleSide,
//alphaTest: 0.5,
blending: THREE.NoBlending,
}),
});
//some experimental skeletonal changes
mesh.skeleton.bones[1].rotation.z += 0.10;
mesh.skeleton.bones[2].rotation.x += -0.65;
mesh.skeleton.bones[3].rotation.y += -0.45;
mesh.skeleton.bones[3].position.x += 0.11;
//updates matrix
mesh.updateMatrix();
mesh.geometry.applyMatrix(mesh.matrix);
mesh.updateMatrixWorld(true);
});
class GPUPickHelper {
constructor() {
// create a 1x1 pixel render target
this.pickingTexture = new THREE.WebGLRenderTarget(1, 1);
this.pixelBuffer = new Uint8Array(4);
}
pick(cssPosition, scene, camera) {
const {
pickingTexture,
pixelBuffer
} = this;
// set the view offset to represent just a single pixel under the mouse
const pixelRatio = renderer.getPixelRatio();
camera.setViewOffset(
renderer.context.drawingBufferWidth, // full width
renderer.context.drawingBufferHeight, // full top
cssPosition.x * pixelRatio | 0, // rect x
cssPosition.y * pixelRatio | 0, // rect y
1, // rect width
1, // rect height
);
// render the scene
// r102
//renderer.setRenderTarget(pickingTexture);
//renderer.render(scene, camera);
//renderer.setRenderTarget(null);
// r98
renderer.render(scene, camera, pickingTexture);
// clear the view offset so rendering returns to normal
camera.clearViewOffset();
//read the pixel
renderer.readRenderTargetPixels(
pickingTexture,
0, // x
0, // y
1, // width
1, // height
pixelBuffer);
const id =
(pixelBuffer[0] << 16) |
(pixelBuffer[1] << 8) |
(pixelBuffer[2]);
return id;
}
}
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;
}
const pickPosition = {
x: 0,
y: 0,
};
const pickHelper = new GPUPickHelper();
let lastPickedId = 0;
let lastPickedObjectSavedEmissive;
function render(time) {
time *= 0.001; // convert to seconds;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
if (lastPickedId) {
pickableObjects[lastPickedId - 1].renderingMaterial.emissive.setHex(lastPickedObjectSavedEmissive);
lastPickedId = 0;
}
for (pickableObject of pickableObjects) {
pickableObject.mesh.material = pickableObject.pickingMaterial;
}
const id = pickHelper.pick(pickPosition, scene, camera, time);
for (pickableObject of pickableObjects) {
pickableObject.mesh.material = pickableObject.renderingMaterial;
}
const pickedObject = pickableObjects[id - 1];
if (pickedObject) {
lastPickedId = id;
lastPickedObjectSavedEmissive = pickedObject.renderingMaterial.emissive.getHex();
pickedObject.renderingMaterial.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
}
renderer.render(scene, camera);
requestAnimationFrame(render);
};
requestAnimationFrame(render);
function setPickPosition(event) {
pickPosition.x = event.clientX;
pickPosition.y = event.clientY;
}
function clearPickPosition() {
// unlike the mouse which always has a position
// if the user stops touching the screen we want
// to stop picking. For now we just pick a value
// unlikely to pick something
pickPosition.x = -100000;
pickPosition.y = -100000;
}
window.addEventListener('mousemove', setPickPosition);
window.addEventListener('mouseout', clearPickPosition);
window.addEventListener('mouseleave', clearPickPosition);
window.addEventListener('touchstart', (event) => {
// prevent the window from scrolling
event.preventDefault();
setPickPosition(event.touches[0]);
}, {
passive: false
});
window.addEventListener('touchmove', (event) => {
setPickPosition(event.touches[0]);
});
window.addEventListener('touchend', clearPickPosition);
window.addEventListener('mousemove', setPickPosition);
window.addEventListener('mouseout', clearPickPosition);
window.addEventListener('mouseleave', clearPickPosition);
body {
margin: 0;
}
canvas {
width: 100vw;
height: 100vh;
display: block;
}
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r98/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r98/js/controls/OrbitControls.js"></script>
<canvas></canvas>

BoxGeometry sides

I already asked a Question here: Add Thickness to faces
The core question is solved but i ran into another problem.
Before my walls were set on side:THREE.BackSide so that they didnt show when they faced the camera but now when they have a thickness that doesnt work anymore and i dont realy understand why.
Before:
Before
After: After
How can i make the thick walls behave like the Plane walls ?

A very rough concept of controlling the visibility of a wall (I've slightly changed translating and positioning of a geometry):
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 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);
scene.add(new THREE.GridHelper(10, 10));
var points = [
new THREE.Vector3(-2, 0, 2),
new THREE.Vector3(2, 0, 2),
new THREE.Vector3(2, 0, -2),
new THREE.Vector3(-2, 0, -2)
]
var walls = [];
points.forEach((p, idx, points) => {
let nextIdx = idx === points.length - 1 ? 0 : idx + 1;
buildWall(p, points[nextIdx], 2, 0.1);
});
function buildWall(pointStart, pointEnd, height, thickness) {
var boxW = pointEnd.clone().sub(pointStart).length();
var boxH = height;
var boxD = thickness;
var boxGeometry = new THREE.BoxGeometry(boxW, boxH, boxD);
boxGeometry.translate(0, boxH * 0.5, 0);
boxGeometry.rotateY(-Math.PI * 0.5);
var wall = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({
color: "aqua",
wireframe: true
}));
wall.position.copy(pointStart).add(pointEnd).multiplyScalar(0.5);
wall.lookAt(pointEnd);
scene.add(wall);
walls.push(wall);
}
var currentPosition = new THREE.Vector3();
render();
function render() {
requestAnimationFrame(render);
walls.forEach(w => {
w.visible = currentPosition.copy(w.position).sub(camera.position).lengthSq() > camera.position.lengthSq();
})
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>