3D model is not displaying
Loading DXF model with dxf loader from GIT. Model is not displaying, only black screen is showing. It might be the camera, the model problem or any other problem. I am loading preprepared model. Im a newby in Three.js
<div id="webgl-output"></div>
<script>
function init() {
// Loading DXF loader
let loader = new THREE.DXFLoader();
loader.load('./disegni/BAPAEA065BEAA-00^SAGOMA.dxf', function(data) {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);
var render = new THREE.WebGLRenderer();
camera.position.set(0, 0, 53);
render.setSize(innerWidth, innerHeight);
document.body.appendChild(canvas = render.domElement);
render.setClearColor(0x111111, 1);
// renderer.setClearColor(new THREE.Color(0x000000))
// renderer.setSize(window.innerWidth, window.innerHeight);
var sceneGroup = data
sceneGroup.rotation.z = 0.5 * Math.PI;
// sceneGroup.scale.set(1, 1, 1)
scene.add(data);
var camera = new THREE.PerspectiveCamera(180, window.innerWidth/ window.innerHeight, 500, 1000, 100)
camera.position.set(0, 0, 0)
sceneGroup.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = 0xffb830;
}enter code here
});
sceneGroup.position.set(0, 0, -53);
scene.add(sceneGroup);
window.sceneGroup = sceneGroup;
document.getElementById("webgl-output").appendChild(render.domElement)
render.render(scene, camera);
});
}
(function() {
init()
})()
</script>
Thank you for any help that might assist me in displaying the 3D graphics
Related
I'm using Three.js in order to render a 3D element.
I work with mousemove in order to rotate the scene with the movement of the mouse.
I'm looking to add an animation that slightly rotates the scene automatically.
It essentially would emulate the rotation done via mouse movement but automatically so the object doesn't appear static when loading.
Does someone know a trivial way to achieve that?
Thanks in advance,
$(function() {
var logoSrc = './assets/vector_gltf/scene.gltf';
var renderer,
scene,
camera,
holder = document.getElementById('holder');
canvas = document.getElementById('canvasLogo');
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true,
});
renderer.setSize($(holder).width(), $(holder).height());
holder.appendChild(renderer.domElement);
renderer.setClearColor( 0x000000, 0 );
renderer.setPixelRatio(window.devicePixelRatio);
// renderer.setSize(window.innerWidth, window.innerHeight);
//on resize
window.addEventListener('resize', () => {
// Update camera
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// Update renderer
// renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setSize($(holder).width(), $(holder).height());
holder.appendChild(renderer.domElement);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});
camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000 );
scene = new THREE.Scene();
var light = new THREE.AmbientLight(0x0000ff, 1);
scene.add(light);
var light2 = new THREE.PointLight(0xff0000, 1);
scene.add(light2);
var loader = new THREE.GLTFLoader();
loader.load(logoSrc, handle_load);
var s;var mesh;
function handle_load(gltf) {
s = gltf.scene;
mesh = s.children[0].children[0].children[0];
// s.children[0].material = new THREE.MeshStandardMaterial({
// normalMap : logoSrc + 'textures/StingrayPBS1SG_normal.png',
// emissiveMap : logoSrc + 'textures/StingrayPBS1SG_emissive.png',
// metalnessMap : logoSrc + 'textures/StingrayPBS1SG_metallicRoughness.png',
// map : logoSrc + 'textures/StingrayPBS1SG_baseColor.png'
// });
scene.add(s);
s.position.y = -0.2;
s.position.z = -2;//15
}
$(".intro").on("mousemove", function(e){
mesh.rotation.set(-0.003 * (e.pageY - window.innerHeight / 20),0, -0.02 * (e.pageX - (window.innerWidth / 2) - 3.14));
//.set(0.0018 * (e.pageY - 291.45) - 1.45,0, 0.02 * (e.pageX - (window.innerWidth / 2) - 3.14))
});
//anim
const clock = new THREE.Clock();
const loop = () =>
{
const elapsedTime = clock.getElapsedTime();//delta time
// Render
renderer.render(scene, camera);
// Call tick again on the next frame
window.requestAnimationFrame(loop);
}
loop();
});
This is what you want: http://threejs.org/examples/misc_controls_orbit.html
Include the orbit controls (after you have downloaded them):
<script src="js/controls/OrbitControls.js"></script>
Setup the variable:
var controls;
Attach the controls to the camera and add a listener:
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
and in your animate function update the controls:
controls.update();
controls.autoRotate();
That last line (autoRotate) is really what you want for the rotation, but everything else is setting up your controls.
You can use a function called animate() that is making your 3D element move automatically and combining it to a render() method.
function animate() {
requestAnimationFrame( animate );
group.rotation += 0.005;
render();
}
function render() {
renderer.render( scene, camera );
}
I am learning three js now. What I am trying to do now is draw a sphere and then texture map an image on the sphere. Basically, I am following this tutorial, http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/.
This is my code
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">
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)
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.SphereGeometry(0.5, 32, 32)
var material = new THREE.MeshPhongMaterial();
var earthMesh = new THREE.Mesh(geometry, material)
scene.add(earthMesh)
// TheJim01: Replacing local file with accessible web resource
// License and source: https://commons.wikimedia.org/wiki/File:Earthmap1000x500compac.jpg
//material.map = THREE.ImageUtils.loadTexture("world.jpg");
material.map = THREE.ImageUtils.loadTexture("https://upload.wikimedia.org/wikipedia/commons/c/c4/Earthmap1000x500compac.jpg");
camera.position.z = 10; //3
//game logic
var update = function() {
};
//draw scene
var render = function() {
renderer.render(scene, camera);
}
// run game loop (update, render, repeat)
var GameLoop = function() {
requestAnimationFrame(GameLoop);
update();
render();
}
GameLoop();
</script>
When I run the code, I got this error in the console.
three.min.js:120 THREE.WebGLRenderer: image is not power of two (1000x500)
My image file actually have 1000X500 size as well. But nothing is displayed on the canvas. What is wrong and how can I fix it?
I was unable to load the texture without errors (in three.js r93) with THREE.ImageUtils.loadTexture. It threw a "tainted canvas" error in Chrome. I switched to using THREE.TextureLoader, which you can see in the code below.
All that said, that was probably not the real problem. Your scene is lacking a light, and without a light, everything will render as black. In the code below, I added a simple point light to the camera.
With those two fixes in place, your code runs as expected.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">
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)
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);
scene.add(camera);
camera.add(new THREE.PointLight(0xfffff, 1, Infinity));
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
var material = new THREE.MeshPhongMaterial();
var earthMesh = new THREE.Mesh(geometry, material)
scene.add(earthMesh)
// TheJim01: Replacing local file with accessible web resource
// License and source: https://commons.wikimedia.org/wiki/File:Earthmap1000x500compac.jpg
//material.map = THREE.ImageUtils.loadTexture("world.jpg");
var loader = new THREE.TextureLoader();
material.map = loader.load("https://upload.wikimedia.org/wikipedia/commons/c/c4/Earthmap1000x500compac.jpg");
camera.position.z = 10; //3
//game logic
var update = function() {
};
//draw scene
var render = function() {
renderer.render(scene, camera);
}
// run game loop (update, render, repeat)
var GameLoop = function() {
requestAnimationFrame(GameLoop);
update();
render();
}
GameLoop();
</script>
I'm a beginner in ThreeJS. I want to import a cube basic from Blender in gLTF format... This is my code.
What is it missing?
var canvas = document.getElementById('canvas');
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(rosa, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
canvas.appendChild(renderer.domElement);
// Instantiate a loader
var loader = new THREE.GLTFLoader();
function renderingScene() {
renderer.render(scene, camera);
}
function cargarGLTF() {
// Load a glTF resource
loader.load('./glTF/resources/cube/untitled.gltf', function (gltf) {
scene.add(gltf.scene);
});
// renderingScene();
}
cargarGLTF();
controlMouse();
renderingScene();
Output console
I'm trying to render a three.js box that has custom textures which I'm loading using THREE.TextureLoader().
While I see THREE.WebGLRenderer 87 in my console, there doesn't seem to be any cube being rendered.
I've created a fiddle to show how I'm attempting to do it: http://jsfiddle.net/hfj7gm6t/4786/
Note that I'm just using one url for all 6 side's textures for simplicity's sake.
Can anybody please help me understand why my beloved cube isn't showing?
First you need a render loop, you cannot just call renderer.render once. Then you need to position your camera correctly and make sure it is actually looking at your cube:
let textureUrls = [
'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png',
'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png'
];
let renderer = null
let camera = null
let scene = null
function renderMap(urls) {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.x = 500;
camera.position.y = 500;
camera.position.z = -500;
camera.lookAt(new THREE.Vector3(0, 0, 0))
let textureLoader = new THREE.TextureLoader();
let materials =
urls.map((url) => {
return textureLoader.load(url);
}).map((texture) => {
return new THREE.MeshBasicMaterial({map: texture})
});
let mesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), materials);
scene.add(mesh);
}
function init() {
renderMap(textureUrls);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
render();
}
function render() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
init()
I have seen various examples of cubemaps made with images served from the local file system, but I haven't been able to find any examples where the images are being dynamically loaded from an external website and populating the cubemap. I have figured a way to do this, and it works perfectly fine in Chrome, Safari, Firefox, Edge and IOS browsers as well. But, not surprisingly, it doesn't work in IE 11.
When trying to open up the cube map, the console spits out the following errors:
WEBGL11003: INVALID_VALUE: texImage2D
WEBGL11122: drawArrays: Texture is not cubemap complete. All cubemaps faces must be defined and be the same size
The textures are the same size and have defined width and height.
var controls, scene, camera, renderer;
var cameraCube, sceneCube;
var textureEquirec, textureCube, loader, cubeMaterial, cubeShader;
var cubeMesh;
var geometry, material, mesh;
var pause;
function init(seat) {
// SCENE
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
// CAMERAS
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0,0,-1000);
cameraCube = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100000);
// LIGHTS
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
// TEXTURES
cubeShader = THREE.ShaderLib[ "cube" ];
cubeMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
updateTexture(seat);
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
textureCube.minFilter = THREE.LinearFilter;
cubeMesh = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), cubeMaterial);
sceneCube.add(cubeMesh);
geometry = new THREE.SphereGeometry(400.0, 24, 24);
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setFaceCulling(THREE.CullFaceNone);
var modal = document.getElementById('modal');
modal.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth / window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
if (pause) return;
requestAnimationFrame(animate);
render();
controls.update();
}
function render() {
var timer = -0.0002 * Date.now();
camera.lookAt(scene.position);
cameraCube.rotation.copy(camera.rotation);
renderer.render(sceneCube, cameraCube);
renderer.render(scene, camera);
}
function loadTexture(texture){
scope.loadingView = true;
if (textureCube) {
textureCube.dispose();
}
loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin('anonymous');
textureCube = loader.load(texture, onLoadCallback, null, onErrorCallback);
cubeMaterial.uniforms.tCube.value = textureCube;
}
function updateTexture(seat){
var path = CDNDomain + '/cloud/assets/';
var files = [
path + 'pathtoimage.jpg',
path + 'pathtoimage.jpg',
path + 'pathtoimage.jpg',
path + 'pathtoimage.jpg',
path + 'pathtoimage.jpg',
path + 'pathtoimage.jpg',
];
loadTexture(files);
}
function initializeControls(){
controls = new THREE.OrbitControls(camera);
controls.minDistance = 500;
controls.maxDistance = 2500;
}
function onLoadCallback(loaded) {
scope.$apply(function(){
scope.loadingView = false;
});
initializeControls();
animate();
}
function onErrorCallback(error){
scope.loadingMsg = 'There was an error processing your request.';
}
I'm calling the init function on the press of a button and passing data.
Realized that the textures aren't the power of 2. After changing the size of the images the issue is fixed in IE11.