const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(120, window.innerwidth / window.innerheight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerwidth, window.innerheight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x000fff});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
I am using Replit to do this but nothing is showing when i run it and there is no error message. I have tried other code from people on replit and theirs works fine but their code is almost identical to mine, I also tried there code in my project and it works fine.
const camera = new THREE.PerspectiveCamera(120, window.innerwidth / window.innerheight, 0.1, 1000);
renderer.setSize(window.innerwidth, window.innerheight);
There are typos in both lines. It should be:
const camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 0.1, 1000);
and
renderer.setSize(window.innerWidth, window.innerHeight);
Related
I have following in html:
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.121.1/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three#0.121.1/examples/jsm/controls/OrbitControls.js";
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const cameraR = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const cameraL = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cameraR.position.x = 0.5;
cameraR.position.z = 5;
cameraL.position.x = -0.5;
cameraL.position.z = 5;
var cameras = [];
cameras.push(cameraL)
cameras.push(cameraR)
var cameraVR = new THREE.ArrayCamera( cameras );
cameraVR.position.set( 0, 0, 5 );
const controls = new OrbitControls(cameraVR,
renderer.domElement);
controls.update();
(function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
controls.update();
renderer.render(scene, cameraVR);
})();
It gives me error:
What am I missing in this code?
Edit: Edited earlier code as camera assigned to controls was wrong earlier. But issue still persists.
Your code fails since you are missing to add a viewport definition for each sub camera. The documentation states:
An instance of ArrayCamera always has an array of sub cameras. It's mandatory to define for each sub camera the viewport property which determines the part of the viewport that is rendered with this camera.
I've updated your code accordingly:
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const cameraR = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
cameraR.viewport = new THREE.Vector4( window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight );
const cameraL = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
cameraL.viewport = new THREE.Vector4( 0, 0, window.innerWidth / 2, window.innerHeight );
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cameraR.position.x = 0.5;
cameraR.position.z = 5;
cameraR.lookAt( 0, 0, 0 );
cameraL.position.x = -0.5;
cameraL.position.z = 5;
cameraL.lookAt( 0, 0, 0 );
var cameras = [];
cameras.push(cameraL)
cameras.push(cameraR)
var cameraVR = new THREE.ArrayCamera(cameras);
cameraVR.position.set(0, 0, 5);
(function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, cameraVR);
})();
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.121/build/three.js"></script>
The official array camera demo webgl_camera_array also demonstrates the usage of the class.
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>
The black screen happens within this script:
var renderer;
var scene;
var camera;
var mesh;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
//Scene init
scene = new THREE.Scene();
//Camera init
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
scene.add(camera);
var geometry = new THREE.PlaneGeometry( 500, 500, 10, 10 );
var texture = new THREE.TextureLoader().load( './annie-spratt-kG-ZwDuQ8ME-unsplash.jpg' );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer.render(scene, camera,mesh);
I'm doing this explicitly but the black screen comes up and the image does not load. How do I solve this problem?
You render your scene before the texture has been loaded. Try it with this approach:
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
scene.add(camera);
const geometry = new THREE.PlaneGeometry(500, 500);
const texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg', render);
const material = new THREE.MeshBasicMaterial({
map: texture
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
function render() {
renderer.render(scene, camera);
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.131.3/build/three.min.js"></script>
<div id="container">
</div>
When you add any object to the scene in ThreeJS it is located in the center by default. so that its position is (0,0,0) although it is drawn in the center. I need to make the default position at top left when coordinates are (0,0,0).
Here is a very simple example shows that the default coordinates are center center:
https://jsfiddle.net/qy3572dt/
var scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 50 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: 'red' } ) );
sprite.position.set(0,0,1);
scene.add( sprite );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
Since you are working with sprites, just change Sprite.center.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
color: 'red'
}));
sprite.center.set(0, 1);
scene.add(sprite);
scene.add(new THREE.AxesHelper());
renderer.render(scene, camera);
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.126.1/build/three.js"></script>
I just setup a very basic "hello world" for three.js…
But apparently my 3d cube is appearing as a 2d square…
The code to the js file is here
const t = THREE;
const scene = new t.Scene();
const camera = new t.PerspectiveCamera(75, window.innerWidth, window.innerHeight, 0.1, 1000);
const renderer = new t.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// create a shape
const geometry = new t.BoxGeometry(1, 1, 1);
// create a material
const material = new t.MeshBasicMaterial({color: 0xFFFFFF, wireframe: true});
const cube = new t.Mesh(geometry, material);
// cube.position.y = 1;
scene.add(cube);
// camera.position.x = 300;
camera.position.z = 5;
// logic
const update = function () {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
};
// draw scene
const render = function () {
renderer.render(scene, camera);
};
// run render loop (update-render-repeat)
const RenderLoop = function () {
window.requestAnimationFrame(RenderLoop);
update();
render();
};
RenderLoop();
And the result of the code is here
Any help is appreciated!
EDIT:
Sorry for not including the code
You're building your PerspectiveCamera wrong:
Your way:
PerspectiveCamera(75, window.innerWidth, window.innerHeight, 0.1, 1000);
Correct way:
PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
You need to pass the ratio w/h, not two separate w, h arguments.