i create walls by creating faces with some points i have.
The creation of the walls does work without an issue.
Now i want to add some thickness to my walls but iam not quite sure how to.
here is my code for creating my walls:
makeWall(start, end) {
let v1 = this.helpers.toVec3(start); //0
let v2 = this.helpers.toVec3(end); //1
let v3 = v2.clone(); //2
v3.y = this.wallHeight;
let v4 = v1.clone(); //3
v4.y = this.wallHeight;
let points = [ v1.clone(), v2.clone(), v3.clone(), v4.clone() ];
console.log("Points", points )
let mesh:THREE.Mesh;
let geometry = new THREE.Geometry();
let label: THREE.Sprite;
let walldirection;
geometry.vertices = [v1, v2, v3, v4];
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.faces.push(new THREE.Face3(0, 2, 3));
geometry = this.helpers.assignUVs(geometry);
mesh = new THREE.Mesh(geometry, this.wallMaterial);
...
}
at the end the walls form a closed Room together.
For Example the points are:
(4) [p, p, p, p]
0: p {x: 200, y: 0, z: -500}
1: p {x: 200, y: 0, z: 300}
2: p {x: 200, y: 277, z: 300}
3: p {x: 200, y: 277, z: -500}
length: 4
thanks for looking into it
Update//
i think iam on the right track now.
i added 4 more points with a offset and created faces for them but there is still something wrong. Probably the Faces are wrong ?
let v1ex = v1.clone(); // 4
v1ex.x = v1ex.x - 10;
let v2ex = v2.clone(); // 5
v2ex.x = v1ex.x + 10;
let v3ex = v3.clone(); // 6
v3ex.x = v3ex.x + 10;
let v4ex = v4.clone(); // 7
v4ex.x = v4ex.x - 10;
let points = [ v1.clone(), v2.clone(), v3.clone(), v4.clone() , v1ex , v2ex , v3ex , v4ex ];
let mesh:THREE.Mesh;
let geometry = new THREE.Geometry( );
let label: THREE.Sprite;
let walldirection;
geometry.vertices = [v1, v2, v3, v4 , v1ex , v2ex , v3ex , v4ex];
geometry.faces.push(new THREE.Face3( 0 , 1 , 2 ) );
geometry.faces.push(new THREE.Face3( 0 , 2 , 3 ) );
geometry.faces.push(new THREE.Face3( 4 , 5 , 6 ) );
geometry.faces.push(new THREE.Face3( 4 , 6 , 7 ) );
geometry.faces.push(new THREE.Face3( 7 , 3 , 6 ) );
geometry.faces.push(new THREE.Face3( 7 , 3 , 2 ) );
geometry.faces.push(new THREE.Face3( 0 , 5 , 1 ) );
geometry.faces.push(new THREE.Face3( 0 , 5 , 4 ) );
Just a concept of how you can do it, using a mesh with thin THREE.BoxGeometry():
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5).setLength(10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
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 pointStart = new THREE.Vector3(-1, 0, 3);
var pointEnd = new THREE.Vector3(-1, 0, -3);
var height = 4;
var thickness = 0.1;
var boxW = pointEnd.clone().sub(pointStart).length();
var boxH = height;
var boxD = thickness;
var boxGeometry = new THREE.BoxGeometry(boxW, boxH, boxD);
boxGeometry.translate(boxW * 0.5, boxH * 0.5, 0);
boxGeometry.rotateY(-Math.PI * 0.5);
var wall = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({
color: "red",
wireframe: true
}));
wall.position.copy(pointStart);
wall.lookAt(pointEnd);
scene.add(wall);
addPoint(pointStart, "green");
addPoint(pointEnd, "yellow");
function addPoint(position, color) {
let p = new THREE.Mesh(new THREE.SphereGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
color: color
}));
p.position.copy(position);
scene.add(p);
}
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Related
i use TreeJs to modelise a form and i want to move 2 parameter in the same slider i want to know if its possible :
like moving x position of two differents vertices at the same time and not only one.
I already use datGui to move one vertice but i want to move more than one with the same slider.
<script src="js/three.js"></script>
<script>
//camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set( 0, -2, 10);
camera.lookAt( 0, -2, 0 );
//rendu
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
//coté gauche---------------------------------------------
var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
//trait A1 (haut vertical)
var a1 = new THREE.Geometry();
a1.vertices = [new THREE.Vector3(-2, 0, 0),
new THREE.Vector3(-2, 2, 0) ];
var A1 = new THREE.Line( a1, material );
//trait A2 (haut horizontal)
var a2 = new THREE.Geometry();
a2.vertices = [new THREE.Vector3( -2, 0, 0),
new THREE.Vector3(-4, 0, 0) ];
var A2 = new THREE.Line( a2, material );
//trait A3 (centre vertical)
var a3 = new THREE.Geometry();
a3.vertices.push(new THREE.Vector3( -4, 0, 0) );
a3.vertices.push(new THREE.Vector3(-4, -2, 0) );
var A3 = new THREE.Line( a3, material );
//trait A4 (bas horizontal)
var a4 = new THREE.Geometry();
a4.vertices.push(new THREE.Vector3( -4, -2, 0) );
a4.vertices.push(new THREE.Vector3(-2, -2, 0) );
var A4 = new THREE.Line( a4, material );
//trait A5 (bas horizontal)
var a5 = new THREE.Geometry();
a5.vertices.push(new THREE.Vector3( -2, -2, 0) );
a5.vertices.push(new THREE.Vector3(-2, -4, 0) );
var A5 = new THREE.Line( a5, material );
//render-------------------------------------------------
scene.add(A1,A2,A3,A4,A5);
var render = function () {
requestAnimationFrame( render );
camera.updateProjectionMatrix();
//maj refresh
A3.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
};
render();
// dat gui----------------------------------------------
var gui = new dat.GUI();
var cameraGui = gui.addFolder("camera position");
cameraGui.add(camera.position, 'x').min(-20).max(20).step(0.25);
cameraGui.add(camera.position, 'y').min(-20).max(20).step(0.25);
cameraGui.add(camera.position, 'z').min(-20).max(20).step(0.25);
cameraGui.open();
var A3Gui = gui.addFolder("position a3");
A3Gui.add(A3.position,'x');
A3Gui.open();
</script>
Just use the built-in .onChange() function explained in their docs: https://workshop.chromeexperiments.com/examples/gui/#7--Events
var A3Gui = gui.addFolder("position a3");
var posSlider = A3Gui.add(A3.position,'x');
posSlider.onChange(function(value){
// Change all the things you want
// with 'value' as the new result
});
I am working on a 3D solar system project that involves a rocket rotation around a planet. I tried following this tutorial (https://www.youtube.com/watch?v=7fJgVyq0OYo) to create a skybox for my planets to exist within. Although there are no errors being displayed and I know the skybox is being created, it is nowhere near my planets and rocket and I'm unsure how to make my camera start in the center of the scene. My code is as follows,
// once everything is loaded, we run our Three.js stuff.
$(function() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
window.addEventListener('resize', function()
{
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
} );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.CubeGeometry(10000,10000,10000);
var cubeMaterials =
[
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_ft.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_bk.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_up.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_dn.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_rt.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_lf.png"), side: THREE.DoubleSide})
];
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);
var cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cube);
// create the object group that contains all the sub-shapes
var rocketGroup = new THREE.Object3D();
scene.add(rocketGroup);
//display grid
//scene.add(new THREE.GridHelper(100,10));
var rocketMaterial = new THREE.MeshLambertMaterial({color: 0xEEEEEE});
var hingeMaterial = new THREE.MeshLambertMaterial({color: 0xFD1414});
/////////////////////////////////////////////////////////////////////////////////////////
var rocketAntennaOne = new THREE.CylinderGeometry( 0, 1, 1, 5);
var rocketAntennaOneMesh = new THREE.Mesh(rocketAntennaOne, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaTwo = new THREE.CylinderGeometry( 1, 1.5, 0.5, 5 );
var rocketAntennaTwoMesh = new THREE.Mesh(rocketAntennaTwo, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaThree = new THREE.CylinderGeometry( 1.5, 2, 0.5, 5 );
var rocketAntennaThreeMesh = new THREE.Mesh( rocketAntennaThree,hingeMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyOne = new THREE.CylinderGeometry( 2, 4, 3, 5 );
var rocketBodyOneMesh = new THREE.Mesh(rocketBodyOne,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTwo = new THREE.CylinderGeometry( 4, 5.5, 3, 5 );
var rocketBodyTwoMesh = new THREE.Mesh(rocketBodyTwo,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyThree = new THREE.CylinderGeometry( 5.5, 7, 3, 5 );
var rocketBodyThreeMesh = new THREE.Mesh(rocketBodyThree,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFour = new THREE.CylinderGeometry( 7, 7.5, 3, 5 );
var rocketBodyFourMesh = new THREE.Mesh(rocketBodyFour,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFive = new THREE.CylinderGeometry( 7.5, 8, 3.5, 5 );
var rocketBodyFiveMesh = new THREE.Mesh(rocketBodyFive,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySix = new THREE.CylinderGeometry( 8, 8, 5, 5 );
var rocketBodySixMesh = new THREE.Mesh(rocketBodySix,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySeven = new THREE.CylinderGeometry( 8, 7.5, 3.5, 5 );
var rocketBodySevenMesh = new THREE.Mesh(rocketBodySeven,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyEight = new THREE.CylinderGeometry( 7.5, 7, 3.5, 5 );
var rocketBodyEightMesh = new THREE.Mesh(rocketBodyEight,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyNine = new THREE.CylinderGeometry( 7, 6.5, 3, 5 );
var rocketBodyNineMesh = new THREE.Mesh(rocketBodyNine,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTen = new THREE.CylinderGeometry( 6.5, 6, 3, 5 );
var rocketBodyTenMesh = new THREE.Mesh(rocketBodyTen,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyUpper = new THREE.CylinderGeometry( 3.5, 4, 3.5, 5 );
var rocketBodyUpperMesh = new THREE.Mesh(rocketBodyUpper,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyLower = new THREE.CylinderGeometry( 2.75, 3, 2.5, 5 );
var rocketBodyLowerMesh = new THREE.Mesh(rocketBodyLower,rocketMaterial, new THREE.MeshPhongMaterial());
//var rocketWindow = new THREE.RingGeometry(5,6,30);
//var rocketWindowMesh = new THREE.Mesh(rocketWindow,hingeMaterial, new THREE.MeshPhongMaterial());
///////////////////////////////////////////////////////////////////////////////////////
var x = 0;
var y = 0;
var RocketFinOne = new THREE.Shape();
RocketFinOne.moveTo( x + 0, y + 0 );
RocketFinOne.lineTo( x + 0, y + 16);
RocketFinOne.lineTo( x + 7, y + 20);
RocketFinOne.lineTo( x + 7, y + 15);
RocketFinOne.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinOne,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinOneMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinTwo = new THREE.Shape();
RocketFinTwo.moveTo( x + 0, y + 0 );
RocketFinTwo.lineTo( x + 0, y + 16);
RocketFinTwo.lineTo( x + 7, y + 20);
RocketFinTwo.lineTo( x + 7, y + 15);
RocketFinTwo.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinTwo,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinTwoMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinThree = new THREE.Shape();
RocketFinThree.moveTo( x + 0, y + 0 );
RocketFinThree.lineTo( x + 0, y + 16);
RocketFinThree.lineTo( x + 7, y + 20);
RocketFinThree.lineTo( x + 7, y + 15);
RocketFinThree.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinThree,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinThreeMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinFour = new THREE.Shape();
RocketFinFour.moveTo( x + 0, y + 0 );
RocketFinFour.lineTo( x + 0, y + 16);
RocketFinFour.lineTo( x + 7, y + 20);
RocketFinFour.lineTo( x + 7, y + 15);
RocketFinFour.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinFour,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinFourMesh = new THREE.Mesh( geometry, material ) ;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var planetEarth = createPlanetEarthMesh(new THREE.SphereGeometry(100, 400, 400));
var planetMoon = createMoonMesh (new THREE.SphereGeometry (40,100,100));
var planetSun = createSunMesh (new THREE.SphereGeometry (150,100,100));
// add the sphere to the scene
scene.add(planetEarth);
scene.add(planetMoon);
scene.add(planetSun);
//scene.add(EarthMesh);
//////////////////////////////////////
scene.add(rocketAntennaOneMesh);
scene.add(rocketAntennaTwoMesh);
scene.add(rocketAntennaThreeMesh);
/////////////////////////////////////
scene.add(rocketBodyOneMesh);
scene.add(rocketBodyTwoMesh);
scene.add(rocketBodyThreeMesh);
scene.add(rocketBodyFourMesh);
scene.add(rocketBodyFiveMesh);
scene.add(rocketBodySixMesh);
scene.add(rocketBodySevenMesh);
scene.add(rocketBodyEightMesh);
scene.add(rocketBodyNineMesh);
scene.add(rocketBodyTenMesh);
///////////////////////////////////////
scene.add(rocketBodyUpperMesh);
scene.add(rocketBodyUpperMesh);
///////////////////////////////////////
//scene.add(rocketWindowMesh);
//////////////////////////////////////
scene.add( rocketFinOneMesh );
scene.add( rocketFinTwoMesh );
scene.add( rocketFinThreeMesh );
scene.add( rocketFinFourMesh );
rocketGroup.position.y = 100;
planetEarth.position.y=-100;
planetMoon.position.x=-100;
planetSun.position.x=200;
//Specify the position of the rocket cone
rocketAntennaOneMesh.position.y = 52.05;
rocketAntennaTwoMesh.position.y = 51.3;
rocketAntennaThreeMesh.position.y = 50.8;
rocketBodyOneMesh.position.y = 49.1;
rocketBodyTwoMesh.position.y = 46.1;
rocketBodyThreeMesh.position.y = 43.1;
rocketBodyFourMesh.position.y = 40.1;
rocketBodyFiveMesh.position.y = 36.9;
rocketBodySixMesh.position.y = 32.7;
rocketBodySevenMesh.position.y = 28.5;
rocketBodyEightMesh.position.y = 25.2;
rocketBodyNineMesh.position.y = 22;
rocketBodyTenMesh.position.y = 19;
/////////////////////////////////////////////////////////
rocketBodyUpperMesh.position.y = 16;
rocketBodyLowerMesh.position.y = 14;
////////////////////////////////////////////////////////
//rocketWindowMesh.position.y = 100;
//rocketwindowMesh.position.x = -20;
////////////////////////////////////////////////////
rocketFinOneMesh.position.x=-7;
rocketFinOneMesh.position.y=3;
rocketFinOneMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.position.x=6 ;
rocketFinTwoMesh.position.y=3;
rocketFinTwoMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.rotation.y = 1 * Math.PI;
rocketFinThreeMesh.position.x=0;
rocketFinThreeMesh.position.y=3;
rocketFinThreeMesh.position.z = 7;
rocketFinThreeMesh.rotation.z = 0.1 * Math.PI;
rocketFinThreeMesh.rotation.y = 0.5 * Math.PI;
rocketFinFourMesh.position.x=0;
rocketFinFourMesh.position.y=3;
rocketFinFourMesh.position.z = -6;
rocketFinFourMesh.rotation.z = 0.1 * Math.PI;
rocketFinFourMesh.rotation.y = 1.5 * Math.PI;
//Add the rocketCone to the lowpolyRocket group
rocketGroup.add(rocketAntennaOneMesh);
rocketGroup.add(rocketAntennaTwoMesh);
rocketGroup.add(rocketAntennaThreeMesh);
/////////////////////////////////////////
rocketGroup.add(rocketBodyOneMesh);
rocketGroup.add(rocketBodyTwoMesh);
rocketGroup.add(rocketBodyThreeMesh);
rocketGroup.add(rocketBodyFourMesh);
rocketGroup.add(rocketBodyFiveMesh);
rocketGroup.add(rocketBodySixMesh);
rocketGroup.add(rocketBodySevenMesh);
rocketGroup.add(rocketBodyEightMesh);
rocketGroup.add(rocketBodyNineMesh);
rocketGroup.add(rocketBodyTenMesh);
//////////////////////////////////////////
rocketGroup.add(rocketBodyUpperMesh);
rocketGroup.add(rocketBodyLowerMesh);
/////////////////////////////////////////
rocketGroup.add(rocketFinOneMesh);
rocketGroup.add(rocketFinTwoMesh);
rocketGroup.add(rocketFinThreeMesh);
rocketGroup.add(rocketFinFourMesh);
//position and point the camera to the center of the scene
camera.position.x = -400;
camera.position.y = 0;
camera.position.z = 3;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-200, 50, 150);
spotLight.castShadow = true;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);
var controls = new function() {
this.EarthMoonRotationSpeed = 1.0;
this.EarthMoonRotationSpeed = 1.0;
};
var gui = new dat.GUI();
gui.add(controls, 'EarthMoonRotationSpeed', 0, 5);
// call the render function
var angle = 0;
render();
function render() {
stats.update();
angle += 0.002 * controls.EarthMoonRotationSpeed;
planetEarth.rotation.y = angle;
angle += 0.002 * controls.EarthMoonRotationSpeed;
planetMoon.rotation.y = angle;
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function createPlanetEarthMesh(geom) {
var loader = new THREE.TextureLoader();
var planetEarthTexture = loader.load("../assets/textures/planets/Earth.png");
var normalEarthTexture = loader.load("../assets/textures/planets/EarthNormal.png");
var planetEarthMaterial = new THREE.MeshPhongMaterial({map: planetEarthTexture, bumpMap: normalEarthTexture});
// create a multimaterial
var planetEarthMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetEarthMaterial]);
return planetEarthMesh;
}
function createMoonMesh(geom) {
var loader = new THREE.TextureLoader();
var planetMoonTexture = loader.load("../assets/textures/planets/moon.jpg");
var normalMoonTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetMoonMaterial = new THREE.MeshPhongMaterial({map: planetMoonTexture, bumpMap: normalMoonTexture});
// create a multimaterial
var planetMoonMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMoonMaterial]);
return planetMoonMesh;
}
function createSunMesh(geom) {
var loader = new THREE.TextureLoader();
var planetSunTexture = loader.load("../assets/textures/planets/sun.jpg");
//var normalSunTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetSunMaterial = new THREE.MeshPhongMaterial({map: planetSunTexture});
//bumpMap: normalMoonTexture
// create a multimaterial
var planetSunMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetSunMaterial]);
return planetSunMesh;
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
body {
margin: 0;
}
<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/utils/SceneUtils.js"></script>
The snippet won't display because "SceneUtils.js" don't seem to work. The project is made in an older version of three.js I'm assuming (unsure how to check the version) since I had to create this project with a default-project. (It is part of an assignment and we were asked to use that version of three.js). When I run the project on my computer it works though since I have that version.
Is there anyway I can link the script properly so you may all view my project and help?
---------------------EDIT-----------------------------------
Okay, so I realized that the error might be to do with my rendering? it seems like the skybox i was making was too big, but when i'd make it much smaller, it would view. Although if I'd look at certain angles, part of the cube with vanish as if it's not being rendered.
As you can see from this screenshot https://imgur.com/a/iYorLxP
You need to narrow down your questions to one issue per question. If you want to figure out how to build a working skybox, there is no reason for all that code including your rocket parts and planets and positions to be part of your question. It creates a huge wall of code that nobody wants to read through on their spare time.
That being said, that's a pretty bad tutorial that's asking you to do a lot of unnecessary work. Three.js already comes with a built-in and easier way to create a skybox: the CubeTextureLoader:
var r = "https://threejs.org/examples/textures/cube/Park3Med/";
var urls = [
r + "px.jpg",
r + "nx.jpg",
r + "py.jpg",
r + "ny.jpg",
r + "pz.jpg",
r + "nz.jpg"
];
var textureCube = new THREE.CubeTextureLoader().load( urls );
scene.background = textureCube;
The code above was taken directly from this example
With this method, you don't have to worry about your camera's position at all; it'll always be in the center of the cube, no matter how far your camera moves in any direction.
And please, learn how to ask a question with a minimal, complete and verifiable example so it makes it easier for people to help you out and solve one problem at a time.
From your edit, it seems the problem is your camera frustum settings. This specifies how far objects can be away from the camera and still be rendered. Some parts of your sky box aren't within the far viewing plane, so are being cut off, resulting in the white background of your scene appearing. To fix this, increase your far frustum to above 1000 when you create your camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 3000);
I've been working on a three.js project that involves a rocket ship orbiting around the planet earth which also rotates around another planet. I seem to get the earth to rotate on it's axis, but I'm not sure how to get it to rotate around another object. I've tried a few methods but I couldn't seem to get it to work for my project.
Is there a way to make this possible?
----------------------------------EDIT-----------------------------
Added a JFiddle, although it gives an eror on there saying the scene Utils isn't available, I dont know how to link it.
https://jsfiddle.net/dm9637cL/
The code for my project is as follows
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<link rel="shortcut icon" href="../favicon.ico">
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/jquery.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body{
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<script src="../libs/OrbitControls.js" type="text/javascript"></script>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
$(function() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
window.addEventListener('resize', function()
{
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
} );
controls = new THREE.OrbitControls(camera, renderer.domElement);
// create the object group that contains all the sub-shapes
var rocketGroup = new THREE.Object3D();
scene.add(rocketGroup);
//display grid
//scene.add(new THREE.GridHelper(100,10));
var rocketMaterial = new THREE.MeshLambertMaterial({color: 0xEEEEEE});
var hingeMaterial = new THREE.MeshLambertMaterial({color: 0xFD1414});
/////////////////////////////////////////////////////////////////////////////////////////
var rocketAntennaOne = new THREE.CylinderGeometry( 0, 1, 1, 5);
var rocketAntennaOneMesh = new THREE.Mesh(rocketAntennaOne, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaTwo = new THREE.CylinderGeometry( 1, 1.5, 0.5, 5 );
var rocketAntennaTwoMesh = new THREE.Mesh(rocketAntennaTwo, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaThree = new THREE.CylinderGeometry( 1.5, 2, 0.5, 5 );
var rocketAntennaThreeMesh = new THREE.Mesh( rocketAntennaThree,hingeMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyOne = new THREE.CylinderGeometry( 2, 4, 3, 5 );
var rocketBodyOneMesh = new THREE.Mesh(rocketBodyOne,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTwo = new THREE.CylinderGeometry( 4, 5.5, 3, 5 );
var rocketBodyTwoMesh = new THREE.Mesh(rocketBodyTwo,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyThree = new THREE.CylinderGeometry( 5.5, 7, 3, 5 );
var rocketBodyThreeMesh = new THREE.Mesh(rocketBodyThree,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFour = new THREE.CylinderGeometry( 7, 7.5, 3, 5 );
var rocketBodyFourMesh = new THREE.Mesh(rocketBodyFour,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFive = new THREE.CylinderGeometry( 7.5, 8, 3.5, 5 );
var rocketBodyFiveMesh = new THREE.Mesh(rocketBodyFive,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySix = new THREE.CylinderGeometry( 8, 8, 5, 5 );
var rocketBodySixMesh = new THREE.Mesh(rocketBodySix,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySeven = new THREE.CylinderGeometry( 8, 7.5, 3.5, 5 );
var rocketBodySevenMesh = new THREE.Mesh(rocketBodySeven,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyEight = new THREE.CylinderGeometry( 7.5, 7, 3.5, 5 );
var rocketBodyEightMesh = new THREE.Mesh(rocketBodyEight,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyNine = new THREE.CylinderGeometry( 7, 6.5, 3, 5 );
var rocketBodyNineMesh = new THREE.Mesh(rocketBodyNine,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTen = new THREE.CylinderGeometry( 6.5, 6, 3, 5 );
var rocketBodyTenMesh = new THREE.Mesh(rocketBodyTen,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyUpper = new THREE.CylinderGeometry( 3.5, 4, 3.5, 5 );
var rocketBodyUpperMesh = new THREE.Mesh(rocketBodyUpper,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyLower = new THREE.CylinderGeometry( 2.75, 3, 2.5, 5 );
var rocketBodyLowerMesh = new THREE.Mesh(rocketBodyLower,rocketMaterial, new THREE.MeshPhongMaterial());
//var rocketWindow = new THREE.RingGeometry(5,6,30);
//var rocketWindowMesh = new THREE.Mesh(rocketWindow,hingeMaterial, new THREE.MeshPhongMaterial());
///////////////////////////////////////////////////////////////////////////////////////
var x = 0;
var y = 0;
var RocketFinOne = new THREE.Shape();
RocketFinOne.moveTo( x + 0, y + 0 );
RocketFinOne.lineTo( x + 0, y + 16);
RocketFinOne.lineTo( x + 7, y + 20);
RocketFinOne.lineTo( x + 7, y + 15);
RocketFinOne.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinOne,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinOneMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinTwo = new THREE.Shape();
RocketFinTwo.moveTo( x + 0, y + 0 );
RocketFinTwo.lineTo( x + 0, y + 16);
RocketFinTwo.lineTo( x + 7, y + 20);
RocketFinTwo.lineTo( x + 7, y + 15);
RocketFinTwo.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinTwo,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinTwoMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinThree = new THREE.Shape();
RocketFinThree.moveTo( x + 0, y + 0 );
RocketFinThree.lineTo( x + 0, y + 16);
RocketFinThree.lineTo( x + 7, y + 20);
RocketFinThree.lineTo( x + 7, y + 15);
RocketFinThree.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinThree,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinThreeMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinFour = new THREE.Shape();
RocketFinFour.moveTo( x + 0, y + 0 );
RocketFinFour.lineTo( x + 0, y + 16);
RocketFinFour.lineTo( x + 7, y + 20);
RocketFinFour.lineTo( x + 7, y + 15);
RocketFinFour.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinFour,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinFourMesh = new THREE.Mesh( geometry, material ) ;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var planetEarth = createPlanetEarthMesh(new THREE.SphereGeometry(100, 400, 400));
var planetMoon = createMoonMesh (new THREE.SphereGeometry (40,100,100));
// add the sphere to the scene
scene.add(planetEarth);
scene.add(planetMoon);
//scene.add(EarthMesh);
//////////////////////////////////////
scene.add(rocketAntennaOneMesh);
scene.add(rocketAntennaTwoMesh);
scene.add(rocketAntennaThreeMesh);
/////////////////////////////////////
scene.add(rocketBodyOneMesh);
scene.add(rocketBodyTwoMesh);
scene.add(rocketBodyThreeMesh);
scene.add(rocketBodyFourMesh);
scene.add(rocketBodyFiveMesh);
scene.add(rocketBodySixMesh);
scene.add(rocketBodySevenMesh);
scene.add(rocketBodyEightMesh);
scene.add(rocketBodyNineMesh);
scene.add(rocketBodyTenMesh);
///////////////////////////////////////
scene.add(rocketBodyUpperMesh);
scene.add(rocketBodyUpperMesh);
///////////////////////////////////////
//scene.add(rocketWindowMesh);
//////////////////////////////////////
scene.add( rocketFinOneMesh );
scene.add( rocketFinTwoMesh );
scene.add( rocketFinThreeMesh );
scene.add( rocketFinFourMesh );
planetEarth.position.y=-100;
planetMoon.position.x=-100;
//Specify the position of the rocket cone
rocketAntennaOneMesh.position.y = 52.05;
rocketAntennaTwoMesh.position.y = 51.3;
rocketAntennaThreeMesh.position.y = 50.8;
rocketBodyOneMesh.position.y = 49.1;
rocketBodyTwoMesh.position.y = 46.1;
rocketBodyThreeMesh.position.y = 43.1;
rocketBodyFourMesh.position.y = 40.1;
rocketBodyFiveMesh.position.y = 36.9;
rocketBodySixMesh.position.y = 32.7;
rocketBodySevenMesh.position.y = 28.5;
rocketBodyEightMesh.position.y = 25.2;
rocketBodyNineMesh.position.y = 22;
rocketBodyTenMesh.position.y = 19;
/////////////////////////////////////////////////////////
rocketBodyUpperMesh.position.y = 16;
rocketBodyLowerMesh.position.y = 14;
////////////////////////////////////////////////////////
//rocketWindowMesh.position.y = 100;
//rocketwindowMesh.position.x = -20;
////////////////////////////////////////////////////
rocketFinOneMesh.position.x=-7;
rocketFinOneMesh.position.y=3;
rocketFinOneMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.position.x=6 ;
rocketFinTwoMesh.position.y=3;
rocketFinTwoMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.rotation.y = 1 * Math.PI;
rocketFinThreeMesh.position.x=0;
rocketFinThreeMesh.position.y=3;
rocketFinThreeMesh.position.z = 7;
rocketFinThreeMesh.rotation.z = 0.1 * Math.PI;
rocketFinThreeMesh.rotation.y = 0.5 * Math.PI;
rocketFinFourMesh.position.x=0;
rocketFinFourMesh.position.y=3;
rocketFinFourMesh.position.z = -6;
rocketFinFourMesh.rotation.z = 0.1 * Math.PI;
rocketFinFourMesh.rotation.y = 1.5 * Math.PI;
//Add the rocketCone to the lowpolyRocket group
rocketGroup.add(rocketAntennaOneMesh);
rocketGroup.add(rocketAntennaTwoMesh);
rocketGroup.add(rocketAntennaTwoMesh);
/////////////////////////////////////////
rocketGroup.add(rocketBodyOneMesh);
rocketGroup.add(rocketBodyTwoMesh);
rocketGroup.add(rocketBodyThreeMesh);
rocketGroup.add(rocketBodyFourMesh);
rocketGroup.add(rocketBodyFiveMesh);
rocketGroup.add(rocketBodySixMesh);
rocketGroup.add(rocketBodySevenMesh);
rocketGroup.add(rocketBodyEightMesh);
rocketGroup.add(rocketBodyNineMesh);
rocketGroup.add(rocketBodyTenMesh);
//////////////////////////////////////////
rocketGroup.add(rocketBodyUpperMesh);
rocketGroup.add(rocketBodyLowerMesh);
/////////////////////////////////////////
rocketGroup.add(rocketFinOneMesh);
rocketGroup.add(rocketFinTwoMesh);
rocketGroup.add(rocketFinThreeMesh);
rocketGroup.add(rocketFinFourMesh);
// position and point the camera to the center of the scene
camera.position.x = -400;
camera.position.y = 0;
camera.position.z = 400;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-200, 50, 150);
spotLight.castShadow = true;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);
var controls = new function() {
this.EarthRotationSpeed = 1.0;
};
var gui = new dat.GUI();
gui.add(controls, 'EarthRotationSpeed', 0, 5);
// call the render function
var angle = 0;
render();
function render() {
stats.update();
angle += 0.002 * controls.EarthRotationSpeed;
//this.speed=0.005;
planetEarth.rotation.y = angle;
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function createPlanetEarthMesh(geom) {
var loader = new THREE.TextureLoader();
var planetEarthTexture = loader.load("../assets/textures/planets/Earth.png");
var normalEarthTexture = loader.load("../assets/textures/planets/EarthNormal.png");
var planetEarthMaterial = new THREE.MeshPhongMaterial({map: planetEarthTexture, bumpMap: normalEarthTexture});
// create a multimaterial
var planetEarthMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetEarthMaterial]);
return planetEarthMesh;
}
function createMoonMesh(geom) {
var loader = new THREE.TextureLoader();
var planetMoonTexture = loader.load("../assets/textures/planets/moon.jpg");
var normalMoonTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetMoonMaterial = new THREE.MeshPhongMaterial({map: planetMoonTexture, bumpMap: normalMoonTexture});
// create a multimaterial
var planetMoonMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMoonMaterial]);
return planetMoonMesh;
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>
I'm trying to create a right triangular prism.
Here is my code so far :
var triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, 1.5, 0.95));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.5, 0.95));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.5, 0.95));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, 1.5, 1.2));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0, -1.5, 1.2));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.5, 1.2));
triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
triangleGeometry.faces.push(new THREE.Face3(3, 4, 5));
// Points 1,4,3 and 6 form a rectangle which I'm trying to construct using triangles 0,2,5 and 0,3,5
triangleGeometry.faces.push(new THREE.Face3(0, 2, 5));
triangleGeometry.faces.push(new THREE.Face3(0, 3, 5));
var triangleMaterial = new THREE.MeshBasicMaterial({
color:0xFFFFFF,
side:THREE.DoubleSide
});
var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial);
triangleMesh.position.set(1, 0.0, 0.0);
scene.add(triangleMesh);
I'm able to get what I want, but I want to know if there is any other good solution to get a right triangular prism.
Create class
PrismGeometry = function ( vertices, height ) {
var Shape = new THREE.Shape();
( function f( ctx ) {
ctx.moveTo( vertices[0].x, vertices[0].y );
for (var i=1; i < vertices.length; i++) {
ctx.lineTo( vertices[i].x, vertices[i].y );
}
ctx.lineTo( vertices[0].x, vertices[0].y );
} )( Shape );
var settings = { };
settings.amount = height;
settings.bevelEnabled = false;
THREE.ExtrudeGeometry.call( this, Shape, settings );
};
PrismGeometry.prototype = Object.create( THREE.ExtrudeGeometry.prototype );
example use
var A = new THREE.Vector2( 0, 0 );
var B = new THREE.Vector2( 30, 10 );
var C = new THREE.Vector2( 20, 50 );
var height = 12;
var geometry = new PrismGeometry( [ A, B, C ], height );
var material = new THREE.MeshPhongMaterial( { color: 0x00b2fc, specular: 0x00ffff, shininess: 20 } );
var prism1 = new THREE.Mesh( geometry, material );
prism1.rotation.x = -Math.PI / 2;
scene.add( prism1 );
Example here
I like #Almaz Vildanov's solution. Works great. Since I use typescript, I ported the class definition to .ts:
import {ExtrudeGeometry, Shape, Vector2} from "three";
class PrismGeometry extends ExtrudeGeometry {
constructor(vertices: Vector2[], height) {
super(new Shape(vertices), {depth: height, bevelEnabled: false});
}
}
example use (as in #Almaz Vildanov's original, but could leave out THREE because of imports):
var A = new Vector2( 0, 0 );
var B = new Vector2( 30, 10 );
var C = new Vector2( 20, 50 );
var height = 12;
var geometry = new PrismGeometry( [ A, B, C ], height );
var material = new MeshPhongMaterial( { color: 0x00b2fc, specular: 0x00ffff, shininess: 20 } );
var prism1 = new Mesh( geometry, material );
prism1.rotation.x = -Math.PI / 2;
scene.add( prism1 );
How can I draw simple square using BufferGeometry? For example BufferGeometry draws 120000 triangles and I want to knock it down to two that form a simple square.
<html>
<head>
<title>test app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//var geometry = new THREE.CubeGeometry(1,1,1);
var triangles = 2;
var geometry = new THREE.BufferGeometry();
geometry.attributes = {
index: {
itemSize: 1,
array: new Uint16Array( triangles * 3 ),
numItems: triangles * 3
},
position: {
itemSize: 3,
array: new Float32Array( triangles * 3 * 3 ),
numItems: triangles * 3 * 3
},
normal: {
itemSize: 3,
array: new Float32Array( triangles * 3 * 3 ),
numItems: triangles * 3 * 3
},
color: {
itemSize: 3,
array: new Float32Array( triangles * 3 * 3 ),
numItems: triangles * 3 * 3
}
}
var color = new THREE.Color();
var indices = geometry.attributes.index.array;
var positions = geometry.attributes.position.array;
var normals = geometry.attributes.normal.array; //not setting normals - is it relevant if there is no light defined?
var colors = geometry.attributes.color.array;
for ( var i = 0; i < indices.length; i ++ ) {
indices[ i ] = i % ( 3 * 1 ); // How to set indices????
}
for ( var i = 0; i < positions.length; i += 9 ) {
//I know these will make two triangles at same position, but i want to see them appear first..
positions[ i ] = 0;
positions[ i + 1 ] = 0;
positions[ i + 2 ] = 0;
positions[ i + 3 ] = 0;
positions[ i + 4 ] = 1;
positions[ i + 5 ] = 0;
positions[ i + 6 ] = 1;
positions[ i + 7 ] = 0;
positions[ i + 8 ] = 0;
color.setRGB( 55, 202, 55 );
colors[ i ] = color.r;
colors[ i + 1 ] = color.g;
colors[ i + 2 ] = color.b;
colors[ i + 3 ] = color.r;
colors[ i + 4 ] = color.g;
colors[ i + 5 ] = color.b;
colors[ i + 6 ] = color.r;
colors[ i + 7 ] = color.g;
colors[ i + 8 ] = color.b;
}
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var square = new THREE.Mesh(geometry, material);
scene.add(square);
camera.position.z = -5;
var render = function () {
requestAnimationFrame(render);
square.rotation.x += 0.1;
square.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
In the newest three js version you cannot set index as how #calvin-sydney wrote in his answer. You will have to use the setIndex method from the THREE.BufferGeometry.
geometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2));
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
geometry.addAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
geometry.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
Here are the solution for your problems:
Since your camera near and far view is between 0.1 and 1000
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
Then your vertices z position must be in between that range. Therefore, please change your code
from
positions[ i + 2 ] = 0;
to
positions[ i + 2 ] = 1;
Also, your code seem to be missing these parts:
geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
for the full fixed code, please refer it here:
http://learn-daily.com/three-js-drawing-flying-triangle-using-buffergeometry/