Three JS - 3D mesh not displaying - three.js

So I've been trying to get my mesh into my scene but cannot get it working at all. I've been looking for tutorials on how to do it, trying all kinds of things for the last hour and a half but cannot get it to show up at all.
Here's my code so far:
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var loader = new THREE.JSONLoader();
loader.load( "stand2.js", modelLoadedCallback);
var meshmaterial = new THREE.MeshBasicMaterial({
wireframe: true,
color: 0xdddddd
});
function modelLoadedCallback(geometry) {
var standmesh = new THREE.Mesh( geometry, meshmaterial);
standmesh.position.x = 0;
standmesh.position.y = 0;
standmesh.position.z = 0;
standmesh.scale.set(0.5, 0.5, 0.5);
scene.add(standmesh);
}
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
var axis = new THREE.AxisHelper(10);
scene.add(axis);
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xdddddd,
wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
scene.add(cube);
camera.position.x = 300;
camera.position.y = 300;
camera.position.z = 300;
camera.lookAt(scene.position);
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
cube.rotation.z +=0.01
}
render();
$("#webGL-container").append(renderer.domElement);
});
I've got a simple rotating cube that shows up perfectly fine, but cannot get my mesh to show up. I've tried messing with it's scale incase it was too big or too small but nothing has worked. Exported it twice using the 3DSMax exporter but it changes nothing. There's no light source, but I'm just focused on seeing a wireframe of it for the time being.
The exported model is also in the same directory of this js file, so the directory isn't wrong either.
Sorry for asking such a basic question but I've honestly been at this for a solid 1h30m+ and cannot get anything to show up.
Thanks for your time.

Related

Create cone geometry with flat base in three.js?

Trying to figure out how to create something that looks like the image below... Tried searching around but couldn't really figure it out...
Try it with CylinderGeometry. This class allows to define different radii for the top and bottom.
let mesh;
let camera, scene, renderer;
init();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 2;
scene = new THREE.Scene();
const geometry = new THREE.CylinderGeometry(0.2, 0.5, 1, 16);
const material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);
}
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.133.1/build/three.min.js"></script>

three.js: Image in panorama viewer is rippled

Currently I'm making myself familiar with three.js and created a simple panorama viewer:
http://webentwicklung.ulrichbangert.de/threejs-image-on-sphere-inside.html
Unfortunately the vertical edges of the pillars are rippled.
When using the panorama viewer of Panorama Studio everything is fine:
http://ulrichbangert.de/heimat/Halberstadt/2018-06-10_Halberstadt_Dom_Panorama.html
var width = window.innerWidth,
height = window.innerHeight;
var scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
camera.position.z = 1;
camera.fov = Math.max(100, Math.min(200, camera.fov));
camera.updateProjectionMatrix();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var loader = new THREE.TextureLoader();
loader.load('images/panorama.jpg', function (texture) {
texture.anisotropy = renderer.getMaxAnisotropy();
var material = new THREE.MeshBasicMaterial({
map: texture
});
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(20, 32, 32),
material
);
sphere.scale.x = -1;
sphere.rotation.x = -0.5;
scene.add(sphere);
var animate = function () {
requestAnimationFrame(animate);
sphere.rotation.y += 0.002;
renderer.render(scene, camera);
};
animate();
});
What's going wrong here?
Try adding more subdivisions to your SphereGeometry. Right now you have 32 lat & long subdivisions, which creates some unsightly straight-line deformations to your texture. If you do something like new THREE.SphereGeometry(20, 100, 100), you'll get better fidelity when texture mapping.

three.js - Model showing with blank (black) texture despite material loaded

I have a 3D model file 3dbaotang.obj and a material file 3dbaotang.mtl. I've loaded both of them using three.js OBJLoader and MTLLoader. The model has shown up, but not the material, as it's solely covered with black. Can anyone help?
Here is my code:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 10000);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var keyLight = new THREE.DirectionalLight('hsl(30, 100%, 75%)', 1.0);
var fillLight = new THREE.DirectionalLight('hsl(240, 100%, 75%)', 0.75);
var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
keyLight.position.set(-100, 0, 100);
fillLight.position.set(100, 0, 100);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.update();
renderer.setSize(window.innerWidth, window.innerHeight, false);
renderer.setClearColor(new THREE.Color(0xf2f2f2), 1);
document.body.appendChild(renderer.domElement);
// LOAD MODEL
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setResourcePath('/models/');
mtlLoader.setPath('/models/');
mtlLoader.load('/3dbaotang.mtl', (materials) => {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('3dbaotang.obj', (object) => {
scene.add(object);
});
});
camera.position.z = 200;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Result:
Adding to Brother Eye's answer, I'm brand new and and spent quite a lot of time in the dark but this got me on to the solution so I thought I'd elaborate for anyone in the same position.
Adding a light can be some simply as follows;
//Add light
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
The reference docs are located at https://threejs.org/docs/#api/en/lights/AmbientLight
It was the lack of light that caused this problem, not the material. After adding ambient light to the scene, the object can be seen normally

Shadows working on three.js r-54 but not working on three.js r-84

I have a problem with shadows on three.js
In this scenario: https://jsfiddle.net/manumid/q5qhjkka/2/ I have a cube with a light pointing to it. It uses three.js r-54. The shadow works fine.
But in the same example, using three.js r-84: https://jsfiddle.net/manumid/krpgr0x0/ the shadow does not appear.
The only difference between codes is, besides the three.js version, the light shadow helper (although this has no relation with my shadow problem):
On r-54:
spot.shadowCameraVisible = true;
On r-84:
scene.add (new THREE.CameraHelper(spot.shadow.camera));
Thank you!
A lot of props seem to have changed between those 30 versions of three. I don't have it looking exactly the same but hopefully this at least helps? A lot of the shadow and shadowMap names are in different places and spotlight has quite a lot more controls now. A good playpen to see how the properties affect the light can be found here https://threejs.org/examples/#webgl_lights_spotlight
https://jsfiddle.net/4to72rkn/
var scene, camera, renderer, cube, cubeM, terrain, spot;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, 400 / 300, 0.01, 10000);
camera.position.set(600, 0, 5000);
scene.add(camera);
renderer = new THREE.WebGLRenderer()
renderer.setClearColor (0xdddddd, 1)
renderer.setSize(400, 300);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container = document.getElementById('canv_0')
container.appendChild(renderer.domElement);
cubeM = new THREE.MeshPhongMaterial({
color: 0xff0000
});
cube = new THREE.Mesh(
new THREE.CubeGeometry(1000, 1000, 1000), cubeM);
cube.position.set(0, 0, 0);
cube.rotation.set(0, 0, 0);
cube.castShadow = true;
scene.add(cube);
terrain = new THREE.Mesh(
new THREE.CubeGeometry(10000, 1000, 10000), new THREE.MeshPhongMaterial({
color: 0x00ff00
}));
terrain.receiveShadow = true;
terrain.position.set(0, -2000, 0);
terrain.rotation.set(0, 0, 0);
scene.add(terrain);
spot = new THREE.SpotLight( 0xffffff, 1 );
spot.shadow.camera.near = 1000;
spot.shadow.camera.far = 10000;
spot.castShadow = true;
spot.position.set(-1000, 2000, 1500);
spot.distance = 20000;
spot.penumbra = 1;
scene.add(spot);
scene.add (new THREE.CameraHelper(spot.shadow.camera));
(function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
<div id="canv_0" width="400" height="300">
</div>

Icosahedron geometry not rendering

I'm just learning how to do this three.js magic. I'm able to draw and animate a cube. But when I change the geometry to an Icosahedron nothing appears.
Inside my js src forlder I only have the three.min.js file. Do I need another .js file in there?
Here is a sample of my code. I'm just a beginner, and have been spending hours trying to figure this out. Please help.
<body>
<script src="js/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.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);*/
var geometry = new THREE.IcosahedronGeometry( 200,1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: false, wireframeLinewidth: 2 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var pointlight = new THREE.PointLight(0xffffff);
pointlight.position.x = 10;
pointlight.position.y = 50;
pointlight.position.z = 1000;
scene.add(pointlight)
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += .01;
cube.rotation.y += .01;
renderer.render(scene, camera);
};
render();
</script>
</body>
I know this is an old post but for future visitors, here's the question answered with live code.
I also went ahead and cleaned it up a bit and annotated some comments to help point out how I solved your problem.
<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
var pointlight = new THREE.PointLight(0xffffff);
pointlight.position.x = 10;
pointlight.position.y = 50;
pointlight.position.z = 1000;
scene.add(pointlight)
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var mesh = new THREE.Mesh(
// Notice radius decreased to 2 because it has to be smaller
// than camera.position. If camera is placed inside the mess,
// then we won't see it.
new THREE.IcosahedronGeometry(2, 0),
// I went ahead and added Phong shading in order to make result clearer
new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
flatShading: true,
}),
);
scene.add(mesh);
var render = function() {
requestAnimationFrame(render);
// fixed the rotation to reference your mesh
mesh.rotation.x += .01;
mesh.rotation.y += .01;
renderer.render(scene, camera);
};
render();
</script>
</body>

Resources