I am trying to make an 3d sphere, which holds some object on surface. I am new to using three js.
Any help, Below is my code for creating sphere.
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 );
//controls = new THREE.OrbitControls( camera, renderer.domElement );
const sphere = new THREE.SphereBufferGeometry();
var geometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: '#7bb2ed', wireframe:true} );
var earthmesh = new THREE.Mesh(geometry, material);
// scene.add(earthmesh);
camera.position.z = 10;
const animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
For your use case, I would start from the (awesome) demo here --from mrdoob-- and the corresponding code on GitHub here.
Note the "SPHERE" button at the bottom of the demo.
Related
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>
1.I want to combine the geometry,what should i do ?
By using position? And i even want to let the group of geometry move in the scene together what should i do? By using add()?For example: the group of demond
Why my triangle failed to draw?
my code:
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new THREE.OrbitControls( camera );
// ambient
scene.add( new THREE.AmbientLight( 0x00ffff ) );
// light
var light = new THREE.DirectionalLight( 0x00ffff, 1 );
light.position.set(10, 10, 0 );
//scene.add( light );
// axes
scene.add( new THREE.AxisHelper( 20 ) );
var verticesOfTriangle1 = new THREE.Vector3(1,0,0);
var verticesOfTriangle2 = new THREE.Vector3(0,0,0.3);
var verticesOfTriangle3 = new THREE.Vector3(0,0,-0.3);
var geometry = new THREE.Triangle(verticesOfTriangle1, verticesOfTriangle2, verticesOfTriangle3);
// material
var material = new THREE.MeshPhongMaterial( {
color: 0x00ffff,
shading: THREE.FlatShading,
transparent: true,
opacity: 0.7,
} );
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
the message from chrome:The error message
Use THREE.Group() to combine objects and move them together.
You can use THREE.ShapeGeometry() to create a triangle. To create a mesh your geometry should inherit properties of THREE.Geometry(). Look into geometries of threejs documentation for default geometries supported.
I want to use the build version of three.js (https://threejs.org/build/three.js) for a project.
I was using an old one version of the library and everything was fine and my mesh (loaded form a .json file) appeared normally.
Here's my code :
var renderer, scene, camera, mesh, material;
initMesh();
function initMesh() {
var controls;
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0,500,700);
camera.up = new THREE.Vector3(0,0,0);
camera.lookAt(new THREE.Vector3(0,0,0));
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new THREE.JSONLoader();
loader.load('test.json', function(geometry) {
material = new THREE.MeshBasicMaterial({ color: 0x00ff84, wireframe: true, wireframeLinewidth: 3 });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
render();
});
}
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
Here is what I got when using old one library.
I don't see what I miss ? Any idea ? Thank you.
I tried with your example
Removing this line fixed the issue: camera.up = new THREE.Vector3(0,0,0);
I'm new to three.js and need to make a project for school. For this project I need a texture on my cube. But the screen stays black.. and there are no console errors! I did everything I can so this is kinda my last change haha.
My code:
<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({
map: THREE.ImageUtils.loadTexture('images/crate2.jpg')
})
// =
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.05;
renderer.render(scene, camera);
};
render();
</script>
You do not have a light in your scene.
Adding one like below should work
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0xffffff); // white light
scene.add(light);
I would add a link to a js fiddle but it seems they have changed and I can not longer find where to get the link.
Anyway, just ad some sort of light.
Perhaps adding a light would help? That or try using THREE.MeshBasicMaterial
I want to render a still image of a rotated cube. The following shows the cube, but it is not rotated. If I call that last line renderer.render(scene, camera); twice in a row, it renders the rotated cube as I would expect with only a single call. Can someone explain this to me? Seems odd I would have to do this to render a static 3D scene.
/* globals THREE, window, document */
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({
color: 'red'
});
var cube = new THREE.Mesh( geometry, material );
cube.rotation.x = 40 * Math.PI/180;
cube.rotation.y = 40 * Math.PI/180;
cube.position.z = 1;
var box = new THREE.BoxHelper(cube);
scene.add( cube );
scene.add( box );
renderer.render(scene, camera);
Adding the the cube to the scene after the box solves the issue.
scene.add( box );
scene.add( cube );
jsfiddle
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(100,100,100);
var material = new THREE.MeshBasicMaterial({
color: 'red'
});
var cube = new THREE.Mesh( geometry, material );
cube.rotation.x = 40 * Math.PI/180;
cube.rotation.y = 40 * Math.PI/180;
cube.position.z = 1;
var box = new THREE.BoxHelper(cube);
scene.add( box );
scene.add( cube );
renderer.render(scene, camera);