TypeScript Scene.add方法代码示例

export async function main(target: HTMLElement) {
  const THREE = await import("three");
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(20, 1, 0.002, 1000);
  camera.rotation.x = -0.02 * (Math.random() * 0.5 + 0.5);
  camera.rotation.y = 0.02 * (Math.random() * 0.5 + 0.5);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  target.appendChild(renderer.domElement);
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "#ff00ff" }),
  );
  const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "#ffff00" }),
  );
  cube.position.z = -2.1;
  cube2.position.z = -2.10001;
  cube2.position.x = -0.01;
  cube2.position.y = -0.01;
  scene.add(cube);
  scene.add(cube2);
  function render() {
    camera.rotation.x += 0.0000001;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
}

        super(container, motionTracker, (scene: Scene, renderer: WebGLRenderer) => {
            var camera = new PerspectiveCamera(100, window.innerWidth / window.innerHeight, 50, 1000000);
            scene.add(camera);
            scene.add(new AmbientLight(0xffdddd, 0.1))
            camera.position.z = 0;
            camera.lookAt(new Vector3(0, 0, 500));
            light = new SpotLight(0xffffff, 1, 7000, 0.6, 1, 2);
            light.add(new PointLight(0xffffff, 0.4, 5000));
			scene.add(light);

            return camera;
        }, () => {

    initCubeScene() {
        var camera, scene, renderer;
        var mesh;

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 400;
        scene = new THREE.Scene();
        //var texture = new THREE.TextureLoader().load('textures/crate.gif');
        var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
        //var material = new THREE.MeshBasicMaterial({ map: texture });
        mesh = new THREE.Mesh(geometry);
        scene.add(mesh);
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', onWindowResize, false);
        
        animate();

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function animate() {
            requestAnimationFrame(animate);
            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
    }

sceneObjects.reduce((offset, mesh) => {
  mesh.position.set(offset, 100, 100)
  scene.add(mesh)

  offset += sphereDiameter + sceneObjectOffset
  return offset

}, centeredContentOffset)

export function resetBall() {
  scene.add(ballModel);
  ballModel.position.set(0, shared.ballPhysics.initialY, 0);
  ballModel.material.transparent = false;
  ballModel.material.opacity = 1;

  ballMarker.position.set(0, 0.01, 0);
  ballMarker.visible = true;
}

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.z = 1000;
  geometry = new THREE.BoxGeometry( 200, 200, 200 );
  material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

 constructor(rendererSettings: THREE.WebGLRendererParameters = {},
             cameraSettings: PerspectiveCameraParameters = {}){
   super();
   this.addClass('ThreeRendererWidget');
   this._scene = new THREE.Scene();
   this._canvas = document.createElement('canvas');
   $(this._canvas).css({position: "absolute"});
   rendererSettings.canvas = this._canvas;
   this._renderer = new THREE.WebGLRenderer(rendererSettings);
   this._camera = new THREE.PerspectiveCamera(cameraSettings.fov,
                                              cameraSettings.aspect,
                                              cameraSettings.near,
                                              cameraSettings.far);
   this._scene.add(this._camera);
   this._renderer.render(this._scene, this._camera);
   this.node.appendChild(this._canvas);
 }

  public updateTerrain(terrain:Terrain) {
    if (!terrain.initialized) {
  		return;
  	}
    this.terrain = terrain;
    if (this.terrainMesh) {
      this.scene.remove(this.terrainMesh);
      this.meshFactory.disposeMesh(this.terrainMesh);
    }

    this.terrainMesh = this.meshFactory.createTerrainMesh(this.terrain, this.heightStretch, this.widthStretch, this.viewWidth, this.viewDepth);
    this.scene.add(this.terrainMesh);
    if (this.terrainTexture&&this.terrainTexture.initialized) {
      this.updateTerrainTexture(this.terrainTexture);
    }
    this.updateArmies(this.armies);
    this.updateMovements(this.movements);
  }

		_.random(0, height)
	]);
});

function worldX(x) {
	return x - window.innerWidth / 2;
}

function worldY(y) {
	return -(y - window.innerHeight / 2);
}

var renderIteration = 0;
var geometry: any = new THREE.Geometry();
var line: any = new THREE.Line(geometry, material);
scene.add(line);

var geometry1 = new THREE.BoxGeometry(222, 222, 0);
var material1 = new THREE.MeshBasicMaterial({ color: 0xffff00 });
var mesh = new THREE.Mesh(geometry1, material1);

scene.add(mesh);

function render() {
	requestAnimationFrame(render);

	// line.rotation.x += 0.01;
	// line.rotation.y += 0.01;
	// shapeMesh.rotation.y += 0.01;

	geometry.vertices = [];

import * as THREE from 'three';

const width = window.innerWidth;
const height = window.innerHeight;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();