3d cube shape using javascript - javascript

I got this code from webgl I have used it same as they mentioned in their tutorial but i cannot get result on my browser screen only i can see is just black background nothing else. i have used three.js library to create 3d model of cube.
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas { width: 100%; height: 100% }
</style>
<title>Pryamid</title>
</head>
<body>
<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 cubegeometry = new THREE.CubeGeometry(1,1,1);
var cubematerial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x000000});
var cube = new THREE.Mesh(cubegeometry, cubematerial);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.y += 0.01;
cube.rotation.x += 0.01;
cube.rotation.z += 0.01;
renderer.render(scene, camera);
};
// Calling the render function
window.onload = function() {
render();
};
</script>
</body>
</html>

Is this your full code? I think it would be helpful if you posted the full HTML context of what you're trying to achieve.
However, what I see at first blink, is that you either don't add the rendering target to your HTML page, or you don't use the canvas you have in your HTML to render to.
The easiest way to get your cube displayed, is by adding the rendering canvas to your page's DOM, with:
document.body.appendChild( renderer.domElement );

Related

Cannot display 3D model in threejs

I am trying to display a model which is gltf but it doesn't come up. I'm running of a http server as without so it is causing more errors now this "Error: Could not establish connection. Receiving end does not exist." comes up
<html><head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style></head>[enter image description here][1]<body>
<script src="js/three.js"></script>
<script src="js/GLTFLoader.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 loader = new THREE.GLTFLoader();
loader.load("LegoEv3.glb", handle_load);
var mesh;
function handle_load(gltf) {
mesh = gltf.scene.children[0];
scene.add(mesh);
mesh.position, (z = -1000);
}
renderer.render(scene, camera);
</script>
you render only once before the model is loaded.
Try rendering again after the model is loaded and added to the scene
function handle_load(gltf) {
mesh = gltf.scene.children[0];
scene.add(mesh);
mesh.position, (z = -1000);
renderer.render(scene, camera); // You need to render after model is added
}

Firefox error during three.js execution code

I try to do a 3D animation with Three.js controls. During the execution of my code in Firefox, a have this error :
EDIT
SyntaxError: import declarations may only appear at top level of a module
And here is my code, simplified :
<!DOCTYPE html>
<head>
<title>Three.js Test</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%;};
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script type="module">
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);
//keep the scene in center of the page
window.addEventListener('resize', function() {
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
//prevent distortion
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
controls = new THREE.OrbitControls(camera, renderer.domElement);
// create the shape
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xFF0080 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate()
{
requestAnimationFrame( animate );
/*cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube.rotation.z += 0.01;*/
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
I don't understand where the error came from and I don't know how to fix it.
I now run my code on a wamp server.
Thanks for your help !
import * as THREE from './jsthree.module.js';
It seems there is a typo. It should be ./js/three.module.js.
In any event, ensure to run your code on a local web server in order to avoid any security issues. More information about this topic in the following guide:
https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

Three JS with website shows no errors but doesnt work

I am trying to just copy the example three.js page into my own small website with a canvas where the 3d animation should be added to. But it just shows nothing even though it shows no errors.
I tried figuring it out by myself but nothing seems to work :(
i have my canvas element in one div on the page:
var canvas = document.getElementById("background");
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.canvas = canvas;
renderer.setSize(canvas.innerWidth, canvas.innerHeight);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
#background {
height: 100%;
width: 100%;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
<canvas id='background'></canvas>
Can you please take a look and show me what i did wrong?
Unless there is a reason for trying to create your own canvas, you can just let three.js produce its own with the following code:
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
With this it creates a new element sets the height and width to match the window and then adds it to the html.
To alter the style further you should use
renderer.domElement.style.attribute = "";
and then you just replace attribute with whatever you are trying to modify.
For more examples you can visit this link:
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

ThreeJS Getting Started code gives console error

I am trying to attempt to learn Three.js from their getting started guide: http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene and I have the code as exactly from the site. I am using the latest code from their site, as for the library. The error in the console is as follows:
Uncaught TypeError: Object #<Object> has no method 'mergeVertices'
I am not really too sure on what the issue is
Here is the code that is from the site that I am using:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>First Three JS App</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// To be able to view anything with Three.js we need a scene, a camera, and a renderer
// -> To render the scene with the camera
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 = THREE.BoxGeometry(10, 10, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 });
var cube = new THREE.Mesh( geometry, material);
scene.add( cube );
camera.position.z = 5;
var render = function render() {
requestAnimationFrame( render )
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render( scene, camera );
};
render();
</script>
</body>
</html>
From what #WestLangley suggested, I needed to review my code. I was missing a new in geometry declaration, and my renderer.setSize call needed 2 params instead of 1 (I was using a ratio) and the final var render = function.... I needed to take out the second render
Sometimes it is good to have a second pair of eyes.. Thanks again #WestLangley

Three.js mouse action

i asked yesterday about how to draw 3D objects in the browser, be able to manipulate them with the mouse and be sure that it works in every browser. Now i am using three.js and im quite happy because it actually works.
I was able to understand the basic tutorial, draw my first scene and rotate the first cube etc.
Now i want to be able to rotate the complete scene with the mouse, googled and found this link. Works fine in the example and i tried to copy the example. Current code looks like this:
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="TrackballControls.js"></script>
<script type="text/javascript">
// Variables
var scene, camera, controls, renderer;
var geometry, material, cube;
init();
animate();
render();
function init() {
// Scene, camera
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 500, window.innerWidth / window.innerHeight, 0.1, 1000 );
// Mouse controls
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener('change',test,false);
// Renderer
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Basic cube to show
geometry = new THREE.CubeGeometry(10,10,10);
material = new THREE.MeshBasicMaterial({color:0x00ff00});
cube = new THREE.Mesh(geometry);
scene.add(cube);
camera.position.z = 10;
}
function test() {
alert("hi");
render();
}
function animate() {
requestAnimationFrame(render);
controls.update();
}
function render() {
renderer.render(scene, camera);
//cube.rotation.x += 0.1;
//cube.rotation.y += 0.1;
}
</script>
</body>
But it doesn't work. The testoutput "hi" only appears once. It should appear quite often when using the mouse. What i tried to accomplish is that controls.addEventListener('change',test,false); looks if anything with the mouse changes (position, keydown etc.) and then calls a new renderframe. In the example (Example) it somehow does what i want it to do.
What am i doing wrong here? I just want to be able to rotate the camera with mousedragging. And yes i am totally new to this. Just read about it for 2 hours now.
Thanks in advance.

Categories

Resources