TypeScript THREE.Scene类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中THREE.Scene类的典型用法代码示例。如果您正苦于以下问题：TypeScript Scene类的具体用法？TypeScript Scene怎么用？TypeScript Scene使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了Scene类的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: main

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();
}

开发者ID:calebegg，项目名称:website，代码行数:30，代码来源:zfighting.ts

示例2: initCubeScene

    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);
        }
    }

开发者ID:pinuchfab，项目名称:nlytethreejs，代码行数:33，代码来源:cabinet-view.ts

示例3: init

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 );
}

开发者ID:aellerton，项目名称:bare-basic-typescript-webpack-three，代码行数:12，代码来源:app.ts

示例4: super

        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;
        }, () => {

开发者ID:yyjhao，项目名称:galaxy-tunnel，代码行数:12，代码来源:display.ts

示例5: constructor

 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);
 }

开发者ID:wheeler-microfluidics，项目名称:Microdrop-3.0，代码行数:17，代码来源:widgets.ts

示例6: WebGLRenderer

const BACKGROUND_COLOR = 0xF0F0F0;
const SNAKE_COLOR = 0x00FF00;
const LIGHT_COLOR = 0xFFFFFF;

// Create a WebGL renderer, camera
// and a scene
const renderer = new WebGLRenderer();
const camera =
    new PerspectiveCamera(
        VIEW_ANGLE,
        ASPECT,
        NEAR,
        FAR
    );

const scene = new Scene();

// Add the camera to the scene.
scene.add(camera);

// Start the renderer.
renderer.setSize(WIDTH, HEIGHT);

// Attach the renderer-supplied
// DOM element.
document.body.appendChild(renderer.domElement);

const Orientation = {
    UP: new Vector3(0, 1, 0),
    DOWN: new Vector3(0, -1, 0),
    LEFT: new Vector3(-1, 0, 0),

开发者ID:nbabanov，项目名称:threejs-playground，代码行数:31，代码来源:main.ts

示例7:

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

  offset += sphereDiameter + sceneObjectOffset
  return offset

}, centeredContentOffset)

开发者ID:agconti，项目名称:intro-webgl，代码行数:8，代码来源:main.ts

示例8: updateTerrain

  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);
  }

开发者ID:NomadHu，项目名称:first_steps，代码行数:18，代码来源:render-service.ts

示例9: resetBall

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;
}

开发者ID:elisee，项目名称:bball，代码行数:9，代码来源:index.ts

示例10:

 movementList.forEach((movement) => {
   let movementMesh:Mesh = this.meshFactory.createMovementMesh(movement, this.getDisplayPosition(movement.from), this.getDisplayPosition(movement.to));
   this.movementMeshes.push(movementMesh);
   this.scene.add(movementMesh);
 })

开发者ID:NomadHu，项目名称:first_steps，代码行数:5，代码来源:render-service.ts

注：本文中的THREE.Scene类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。