Three.js 学习

最新推荐文章于 2024-10-09 18:48:41 发布
最新推荐文章于 2024-10-09 18:48:41 发布
阅读量418 收藏
点赞数
分类专栏： 3d设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu399/article/details/85792450
版权

魔方

<!DOCTYPE html>

<html>

<head>
    <title>Example 04.05 - Mesh face material</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <script type="text/javascript" src="../libs/TrackballControls.js"></script>
    <script type="text/javascript" src="./libs/MagicCubeFace.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {
        var clock = new THREE.Clock();
        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = false;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = -7;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // position and point the camera to the center of the scene
        camera.position.x = -40;
        camera.position.y = 40;
        camera.position.z = 40;
        camera.lookAt(scene.position);

        var trackballControls = new THREE.TrackballControls(camera);

        trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.0;
        trackballControls.panSpeed = 1.0;
        trackballControls.staticMoving = true;

        document.addEventListener('mousedown', onDocumentMouseDown, false);

        // add subtle ambient lighting
//        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
//        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var group = new THREE.Mesh();
        var cubes = [];
        initGroups(3);
        for (var x = 0; x < 3; x++) {
            for (var y = 0; y < 3; y++) {
                for (var z = 0; z < 3; z++) {
                    var cubeGeom = new THREE.BoxGeometry(2, 2, 2);
                    var cube = new THREE.Mesh(cubeGeom, createFaceMaterial() );
                    cube.position.set(x * 3 - 3, y * 3 - 3, z * 3 - 3);
                    initCubeFaces(cube, x, y, z);
                    cubes.push(cube);
                    group.add(cube);
                }
            }
        }
        console.log(groupsLog);
        // group.rotation.y = 0.5 * Math.PI;


        // call the render function
        scene.add(group);
        var step = 0;

        var controls = new function () {
            this.rotationSpeed = 0.02;
            this.numberOfObjects = scene.children.length;
        };

        var gui = new dat.GUI();
        gui.add(controls, 'rotationSpeed', 0, 0.5);

        render();

        function render() {
            stats.update();

            // group.rotation.y = step += controls.rotationSpeed;
            // group.rotation.x = step;
            // group.rotation.z = step;
            var delta = clock.getDelta();
            trackballControls.update(delta);
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms


            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }

        function createFaceMaterial() {
            // add all the rubik cube elements
            var mats = [];
            var color = "#009e60";
            //后前 上下 右左
            mats.push(new THREE.MeshBasicMaterial({color: 0x009e60})); //green
            mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));  //blue, green opposite blue

            mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
            mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));

            mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
            mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));

            mats.forEach(obj => {
                // obj.side = THREE.BackSide;
                obj.side = THREE.FrontSide;
                obj.transparent = true;
                // obj.opacity = 0.5;
            });

            var faceMaterial = new THREE.MeshFaceMaterial(mats);
            return faceMaterial;
        }

        function onDocumentMouseDown(event) {

            var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
            vector = vector.unproject(camera);

            var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

            var intersects = raycaster.intersectObjects(cubes);

            if (intersects.length > 0) {
                var selectedObj = intersects[0];
                console.log("faceIndex: " + selectedObj.faceIndex);
                // console.log(selectedObj.object.name);
                // console.log(selectedObj);
                selectedObj.object.material.materials.forEach( m => m.opacity = 0.8);
            }
        }
    }
    window.onload = init;

</script>
</body>
</html>

./libs/MagicCubeFace.js

var colorToIntMap = {yellow:0, white:1, blue:2, green:3, orange:4, red:5};
var intToColorArr = ["yellow", "white", "blue", "green", "orange", "red"];
//上黄下白 前蓝后绿 左橙右红,
var groups = [[], [], []];
var groupsLog = [[], [], []];
var axis = {
    X:0,
    Y:1,
    Z:2
};
var opTypeEnum = {
	CLOCKWISE: 0,
	COUNTERCLOCKWISE: 1,
	CLOCKWISE_DOUBLE: 2
};

var lvl = 2;
function initGroups(level) {
    lvl = level;
    for (var i = 0; i < level; i++) {
    	groups[0].push([]);
    	groups[1].push([]);
    	groups[2].push([]);
        groupsLog[0].push([]);
        groupsLog[1].push([]);
        groupsLog[2].push([]);
	}
}

var MagicCubeFace = function(originFaceDir, originLocation) {
 	var that = {
 		color: intToColorArr[originFaceDir],
 		faceDir: originFaceDir,
		location: originLocation,
 		getOriginFaceDir: function () {
			return originFaceDir;
        },
        getOriginFaceLoc: function () {
            return originFaceLoc;
        },
 		setFaceDirAndLocation: function(dir, location) {	//还没有燃尽返回true
			that.faceDir = dir;
			that.location = location;
 		}
 	};
 	return that;
}

var CubeFaces = function (colorAndCodeArr) {
    //从Three.js立方体的面索引找颜色编号， 颜色编号{yellow:0, white:1, blue:2, green:3, orange:4, red:5}
    var faceIndexToIntArr = [3, 3, 2, 2, 0, 0, 1, 1, 5, 5, 4, 4];
	var that = {};
	colorAndCodeArr.forEach(obj => {
		var colorIndex = intToColorArr[obj.color];
		that[colorIndex] = MagicCubeFace(colorIndex, obj.code);
	});
    that.getCubeFaceByFaceIndex = function (threejsFaceIndex) {
		var colorIndex = faceIndexToIntArr[threejsFaceIndex];
		return that[colorIndex];
    };
	return that;
}

//axis is int type, x axis is 0, y axis is 1, z axis is 2
function rotateLayer(axis, index, operationType) {
    rotateArr(groups[axis][index], lvl, operationType);
    groups[2][0][index],groups[2][1][index],groups[2][2][index]
}

function rotateArr(arr, colNum, operationType) {
    var ret = [];
    var rowNum = Math.ceil(arr.length/colNum);
    for (let i = 0; i < arr.length; i++) {
        let row = ~~(i / colNum), col = i % colNum;
        switch (operationType) {
            case 0://opTypeEnum.CLOCKWISE:
                ret[col * rowNum + rowNum - row - 1] = arr[i];
                break;
            case 1://opTypeEnum.COUNTERCLOCKWISE:
                ret[(colNum - 1 - col) * rowNum + row] = arr[i];
                break;
            case 2://opTypeEnum.CLOCKWISE_DOUBLE:
                let row2 = rowNum - 1 - row;
                let col2 = colNum - 1 - col;
                ret[row2 * colNum + col2] = arr[i];
                break;
        }
    }
    return ret;
}

function prettyLog(arr, colNum) {
    var ret = [], sub = [], count = 1;
    for (let i = 0; i < arr.length; i++, count++) {
        sub.push(arr[i]);
        if (count >= colNum) {
            count = 0;
            ret.push(sub);
            console.log(sub);
            sub = [];
        }
    }
    return ret;
}
// var arr = []; for (let i = 0; i < 16; i++) { arr[i] = i;}
// prettyLog(rotateArr(arr, 8, 1), 8);

function initCubeFaces(cube, x, y, z) {
    groups[axis.X][x][lvl * y + z] = cube;
    groups[axis.Y][y][lvl * x + z] = cube;
    groups[axis.Z][z][lvl * y + x] = cube;
    cube.name = x + ", " + y + ", " + z;
    groupsLog[axis.X][x][lvl * y + z] = cube.name;
    groupsLog[axis.Y][y][lvl * x + z] = cube.name;
    groupsLog[axis.Z][z][lvl * y + x] = cube.name;
    cube.lx = x, cube.ly = y, cube.lz = z;
    if (x == 0 && y == 0 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"blue", code:6}, {color:"orange", code:8}, {color:"white", code:0} ]);
    }
    if (x == 0 && y == 0 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"blue", code:7}, {color:"white", code:1} ]);
    }
    if (x == 0 && y == 0 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"blue", code:8}, {color:"white", code:2}, {color:"red", code:6} ]);
    }
    if (x == 0 && y == 1 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"blue", code:3}, {color:"orange", code:5}]);
    }
    if (x == 0 && y == 1 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"blue", code:4} ]);
    }
    if (x == 0 && y == 1 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"blue", code:5}, {color:"red", code:3} ]);
    }
    if (x == 0 && y == 2 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"blue", code:0}, {color:"orange", code:2}, {color:"yellow", code:6} ]);
    }
    if (x == 0 && y == 2 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"blue", code:1}, {color:"yellow", code:7} ]);
    }
    if (x == 0 && y == 2 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"blue", code:2}, {color:"yellow", code:8}, {color:"red", code:0} ]);
    }

    if (x == 1 && y == 0 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"orange", code:7}, {color:"white", code:3} ]);
    }
    if (x == 1 && y == 0 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"white", code:4} ]);
    }
    if (x == 1 && y == 0 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"white", code:5}, {color:"red", code:7} ]);
    }
    if (x == 1 && y == 1 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"orange", code:4} ]);
    }
    // if (x == 1 && y == 1 && z == 1) {
    //     cube.faceObj = null;
    // }
    if (x == 1 && y == 1 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"red", code:4} ]);
    }
    if (x == 1 && y == 2 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"orange", code:1}, {color:"yellow", code:3} ]);
    }
    if (x == 1 && y == 2 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"yellow", code:4} ]);
    }
    if (x == 1 && y == 2 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"yellow", code:5}, {color:"red", code:1} ]);
    }

    if (x == 2 && y == 0 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"green", code:8}, {color:"orange", code:6}, {color:"white", code:6} ]);
    }
    if (x == 2 && y == 0 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"green", code:7}, {color:"white", code:7} ]);
    }
    if (x == 2 && y == 0 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"green", code:6}, {color:"white", code:8}, {color:"red", code:8} ]);
    }
    if (x == 2 && y == 1 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"green", code:5}, {color:"orange", code:3}]);
    }
    if (x == 2 && y == 1 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"green", code:4} ]);
    }
    if (x == 2 && y == 1 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"green", code:3}, {color:"red", code:5} ]);
    }
    if (x == 2 && y == 2 && z == 0) {
        cube.faceObj = CubeFaces([ {color:"green", code:2}, {color:"orange", code:0}, {color:"yellow", code:0} ]);
    }
    if (x == 2 && y == 2 && z == 1) {
        cube.faceObj = CubeFaces([ {color:"green", code:1}, {color:"yellow", code:1} ]);
    }
    if (x == 2 && y == 2 && z == 2) {
        cube.faceObj = CubeFaces([ {color:"green", code:0}, {color:"yellow", code:2}, {color:"red", code:2} ]);
    }
}

自定义几何体
对于自定义几何体，根据顶点构造三角面时，要特别注意，凡是镜头camera 能够看到的三角面，顶点的序列必须是顺时针的，看不见的三角面的顶点序列必须是逆顺时针的，否则构造的几何体会很奇怪，并且不能产生投影

<!DOCTYPE html>

<html>

<head>
    <title>Example 02.05 - Custom geometry</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <script type="text/javascript" src="../libs/TrackballControls.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {
        var clock = new THREE.Clock();
        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // position and point the camera to the center of the scene
        camera.position.x = -20;
        camera.position.y = 35;
        camera.position.z = 20;
        // camera.position.x = -30;
        // camera.position.y = 40;
        // camera.position.z = -30;
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        var trackballControls = new THREE.TrackballControls(camera);

        trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.0;
        trackballControls.panSpeed = 1.0;
//        trackballControls.noZoom=false;
//        trackballControls.noPan=false;
        trackballControls.staticMoving = true;
//        trackballControls.dynamicDampingFactor=0.3;

        // add subtle ambient lighting
//        var ambientLight = new THREE.AmbientLight(0x494949);
//        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, 10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        var step = 0;


        var vertices = [
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(1, -1, 1),
            new THREE.Vector3(1, -1, -1),
            new THREE.Vector3(-1, 0, -1),
            new THREE.Vector3(-1, 0, 1)
        ];

        var faces = [
            new THREE.Face3(1, 3, 5),
            new THREE.Face3(0, 2, 4),

            new THREE.Face3(2, 1, 5),
            new THREE.Face3(1, 0, 3),
            new THREE.Face3(3, 4, 5),

            new THREE.Face3(0, 1, 2),
            new THREE.Face3(0, 4, 3),
            new THREE.Face3(2, 5, 4)
        ];

        var geom = new THREE.Geometry();
        geom.vertices = vertices;
        geom.faces = faces;
        geom.computeFaceNormals();


        var materials = [
            // new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),
            new THREE.MeshNormalMaterial({color: 0x000000, transparent: true, opacity: 0.8}),
            new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})

        ];


        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
        mesh.children.forEach(function (e) {
            e.castShadow = true
        });
//        mesh.children[0].translateX(0.5);
//        mesh.children[0].translateZ(0.5);

        scene.add(mesh);

        function addControl(x, y, z) {
            var controls = {x:x, y:y, z:z};

            return controls;
        }

        var controlPoints = [];
        var half = 2.5;
        controlPoints.push(addControl(-half, -half, -half));
        controlPoints.push(addControl(half, -half, -half));
        controlPoints.push(addControl(half, -half, half));
        controlPoints.push(addControl(-half, half, -half));
        controlPoints.push(addControl(-half, half, half));
        controlPoints.push(addControl(half, half, half));

        var gui = new dat.GUI();
        gui.add(new function () {
            this.clone = function () {

                var clonedGeometry = mesh.children[0].geometry.clone();
                var materials = [
                    new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),
                    new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})

                ];

                var mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);
                mesh2.children.forEach(function (e) {
                    e.castShadow = true
                });

                mesh2.translateX(5);
                mesh2.translateZ(5);
                mesh2.name = "clone";
                scene.remove(scene.getChildByName("clone"));
                scene.add(mesh2);


            }
        }, 'clone');

        for (var i = 0; i < controlPoints.length; i++) {

            f1 = gui.addFolder('Vertices ' + (i + 1));
            f1.add(controlPoints[i], 'x', -10, 10);
            f1.add(controlPoints[i], 'y', -10, 10);
            f1.add(controlPoints[i], 'z', -10, 10);

        }

        render();
        function render() {
            stats.update();

            var vertices = [];
            for (var i = 0; i < controlPoints.length; i++) {
                vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
            }

            mesh.children.forEach(function (e) {
                e.geometry.vertices = vertices;
                e.geometry.verticesNeedUpdate = true;
                e.geometry.computeFaceNormals();
            });
            mesh.position.y = 10;
            // mesh.rotation.x += 0.02;
            mesh.rotation.y += 0.01;
            // mesh.rotation.z += 0.02;

            var delta = clock.getDelta();
            trackballControls.update(delta);
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init


</script>
</body>

http://xuewen.cnki.net/CJFD-ZOXE200609015.html
https://github.com/mrdoob/three.js/blob/master/src/geometries/DodecahedronGeometry.js
https://github.com/mrdoob/three.js/blob/master/src/geometries/PolyhedronGeometry.js

从杰
关注
专栏目录
Three.js学习之几何形状
10-21
Three.js是一个轻量级的3D图形库，它封装了WebGL，并通过相对简单的API让用户可以在网页上实现3D效果。Three.js支持多种类型的几何体，其中包括立方体（CubeGeometry）、平面（PlaneGeometry）和球体...
Learn-Three.js-Third-Edition:学习Three.js第三版，由Packt发行
05-28
使用Three.js，无需学习WebGL，就可以使用JavaScript以直观的方式创建精美的3D图形。 通过这本书，您将学习如何利用WebGL和现代浏览器的全部潜能，直接在浏览器中创建和制作精美的3D场景并为其设置动画。 它从Three...
THREE.js 学习笔记（一）
weixin_30326741的博客
11-03 210
一. 获取THREE.js three.js的代码托管在github上面，https://github.com/mrdoob/three.js/ 我们可以用git来获取代码，闲麻烦的话也可以直接下载zip文件。 二. 目录结构 拿到代码后先看下three.js的目录结构 |-build |-custom |-Three.js |-examples |-gui ...
Three.js学习（一）初识three.js
volit的博客
12-31 1165
​ 使用.render()方法进行渲染，渲染的频率不能太低，否则会感觉到明显的卡顿，比如setInterval(render,200)，动画会有不流畅的感觉；也不能设置的太高，否则硬件设备的性能会跟不上。可能并不会按照我们实际期望的60FPS执行，两次执行渲染函数的时间也不一定相同，如果执行旋转命令的时间间隔不同，旋转运动就会不均匀。不会立即调用函数而是向浏览器发起一个执行某函数的请求，什么时候执行由浏览器决定，一般默认会保持60FPS的频率，大约每16.7ms调用一次。（1）一个简单的小实例。
threejs学习
最新发布
a2739294436的博客
10-09 398
threejs学习。
three入门学习
Dream_travelerly的博客
01-23 1007
【代码】three入门学习。
three 学习笔记
qq_38295468的博客
03-08 950
在使用three去搭建3D模型的时候，我们首先要了解three模型它的构成元素，就像写作文一样，记叙文有时间地点人物三要素，而我们的three模型亦如此；或是点击修改参数调整网格位置，根据鼠标选中需要调整网格线，然后鼠标拖动到想到的位置，确定根据当前的调整重绘网格交点；搭建一个根据长宽高展示建筑物的模型，然后选取lps等级在该建筑物上绘制对应的网格线，展示间隔距离中的网格法，以便人们理解；根据长宽的数据和lps等级，用长宽除以lps等级，得到网格线条的间距，然后利用前后两点坐标分别生成网格对应的排和列；
Three.js学习笔记-快速入门
巨酱Mango的博客
01-28 928
文章目录1. Three.js 快速入门1. 初步渲染并展示三维对象2. 添加材质、灯光和阴影3. 添加统计图形4. 添加动画使用 dat.GUI 控制对象2. 跟场景有关的组件2.1 场景最常用的几个函数2.2 给场景加雾化效果2.3 使用材质覆盖属性2.4 几何对象的属性和函数 1. Three.js 快速入门 想不起来的时候，务必要读代码 参考书籍《Three.js 开发指南》。由于版本问题...
基于-Three.js-的仓库可视化管理系统源码（优质项目）.zip
04-22
基于-Three.js-的仓库可视化管理系统源码+数据库.zip【项目资源】：基于 Three.js 的仓库可视化管理系统是一个利用 Three.js 这一强大的 JavaScript 3D 库来创建和管理仓库数据的系统。Three.js 允许开发者在网页上...
Three.js-webgl物联网粮仓3D可视化
03-12
本项目名为"Three.js-webgl物联网粮仓3D可视化"，是基于...通过学习和研究这个项目，开发者不仅可以掌握Three.js和Vue.js的实践应用，还能深入了解物联网在实际场景中的应用，为今后的3D可视化项目开发积累宝贵经验。
three 学习（入门篇-你的第一个场景）
u010206379的博客
04-07 103
你的第一个three程序
three.js学习笔记（react版）
Pluto_fxy的博客
09-12 1951
这个文章是记录了博主学习three的一些磕磕绊绊，查阅了大量资料后的总结。
three.js零基础入门超全超细的教程整理（一）
monkey7
04-08 7075
什么是three.js ：前端3D框架 （ 绘制3D的js轻量级框架 采用HTML5 Canvas提供硬件3D加速渲染）应用场景：VR模型、地图、家装，机房、厂房等
Three.js学习11：几何体（2）-常见三维几何体
九天翔龙的技术博客
02-20 1182
本文继续学习了解几何体，三维几何体。
如何学习three.js
敖丙007的博客
01-15 1237
如何学习three.js
前端开发three.js入门超详细学习，一起来学习3D吧
前端开发工程师
11-20 5712
Three.js 是一个用于在 Web 浏览器中创建和渲染 3D 图形的 JavaScript 库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的 3D 场景和动画。
ThreeJs的学习：Face的理解
太古时代的专栏
08-01 4228
先上代码： <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - indexed instancing (single box), dynamic updates</title> <meta charset="utf-8"> <meta...
three.js学习
07-29
你想学习关于 three.js 的内容吗？我可以为你提供一些相关的信息和资源。首先，three.js 是一个用于创建 3D 图形的 JavaScript 库，它可以在 Web 浏览器中渲染复杂的三维场景和动画效果。如果你想学习如何使用 three.js，以下是一些步骤和资源供你参考： 1. 了解基础知识：在开始学习 three.js 之前，建议你先掌握 HTML、CSS 和 JavaScript 的基础知识。 2. 安装和设置：你可以通过下载 three.js 的最新版本文件或使用 CDN 来引入 three.js 库。确保在你的 HTML 文件中正确地链接和配置 three.js。 3. 学习文档和示例：three.js 官方网站提供了详细的文档和示例，你可以通过阅读文档和尝试示例来了解 three.js 的各种功能和用法。官方文档地址是：https://threejs.org/docs/index.html 4. 学习基本概念：熟悉 three.js 中的基本概念，如场景（Scene）、相机（Camera）、渲染器（Renderer）、几何体（Geometry）、材质（Material）等。理解这些概念对于构建三维场景至关重要。 5. 创建简单场景：从简单的场景开始，逐步添加和调整对象、光照和材质等。通过实践来熟悉 three.js 的基本用法和 API。 6. 学习进阶技术：一旦你掌握了基本的用法，你可以学习更高级的技术，如动画、纹理映射、阴影、粒子效果等。three.js 提供了丰富的功能和扩展库，你可以根据自己的需求进一步探索。 除了官方文档外，还有一些优秀的教程和资源可供参考，例如： - three.js Fundamentals：https://threejsfundamentals.org/ ＊＊＊
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值