threejs2创建小球和辅助器(可控制)

Posted Jessica巨人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了threejs2创建小球和辅助器(可控制)相关的知识,希望对你有一定的参考价值。

import {WebGLRenderer,PerspectiveCamera, Scene, AxesHelper,SphereGeometry, HemisphereLight,MeshBasicMaterial,MeshPhongMaterial, Mesh,DoubleSide}from "three"
import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"
var renedrer,camera,control,scene;


function init() 
{
    renedrer=new WebGLRenderer({});
    document.body.appendChild(renedrer.domElement);
    renedrer.setSize(window.innerWidth,window .innerHeight);

    camera=new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
    camera.position.z=20;


    var light=new HemisphereLight(0xfffff,0x444444);

    control=new OrbitControls(camera,renedrer.domElement);

    scene =new Scene();


    scene.add(new Mesh(new SphereGeometry(2,30,30),new MeshPhongMaterial({color:0xff0000,side:DoubleSide})));
    scene.add(light);
    scene.add(new AxesHelper(10000));

    window.addEventListener('resize',()=>{
        renedrer.setSize(window.innerWidth,window .innerHeight);
    })
}
function render() {

    renedrer.render(scene,camera);
    requestAnimationFrame(render);
}
init();
render();

效果图:
会拉扁

import {WebGLRenderer,PerspectiveCamera, Scene, AxesHelper,SphereGeometry, HemisphereLight,MeshBasicMaterial,MeshPhongMaterial, Mesh,DoubleSide}from "three"
import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"
var renedrer,camera,control,scene;


function init() 
{
    renedrer=new WebGLRenderer({});
    document.body.appendChild(renedrer.domElement);
    renedrer.setSize(window.innerWidth,window .innerHeight);

    camera=new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
    camera.position.z=20;
    


    var light=new HemisphereLight(0xfffff,0x444444);

    control=new OrbitControls(camera,renedrer.domElement);

    scene =new Scene();


    scene.add(new Mesh(new SphereGeometry(2,30,30),new MeshPhongMaterial({color:0xff0000,side:DoubleSide})));
    scene.add(light);
    scene.add(new AxesHelper(10000));

    window.addEventListener('resize',()=>{
        renedrer.setSize(window.innerWidth,window .innerHeight);
        camera.aspect=window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
    })
}
function render() {

    renedrer.render(scene,camera);
    requestAnimationFrame(render);
}
init();
render();

这样就好啦

以上是关于threejs2创建小球和辅助器(可控制)的主要内容,如果未能解决你的问题,请参考以下文章

Windows程序设计之简单的动画效果(小球弹一弹)

上机题目(初级)- 鼠标控制小球(Java)

上机题目(初级)- 键盘控制小球(Java)

unity---小球击打围墙

Vue实现购物小球抛物线的方法实例

弹球游戏设计