three.js从入门到精通系列教程021 - three.js通过贴图使用图像材质创建圆环救生圈

smartsmile2012

已于 2024-01-21 07:40:25 修改

阅读量363

点赞数 10

CC 4.0 BY-SA版权

分类专栏： three.js从入门到精通系列教程文章标签： javascript 3D相机 three.js 数字孪生元宇宙

于 2024-01-21 07:40:11 首次发布

本文链接：https://blog.youkuaiyun.com/smartsmile2012/article/details/135715522

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程021 - three.js通过贴图使用图像材质创建圆环救生圈</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor('white', 1.0);
        $("#myContainer").append(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 1, 1000);
        var myScene = new THREE.Scene();
        myScene.add(new THREE.AmbientLight(0x804040));
        var myLight = new THREE.DirectionalLight(0xffffff);
        myLight.position.set(0, 1, 0);
        myScene.add(