<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程008 - three.js渲染器之SVG渲染器和WebGL渲染器</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
    <script src="ThreeJS/Projector.js"></script>
    <script src="ThreeJS/SVGRenderer.js"></script>
</head>

<body>
    <p><button id="myButton1">启用SVG渲染器</button>
        <button id="myButton2">启用WebGL渲染器</button>
    </p>
    <center id="myContainer"></center>
    <script>
        var isSVGRenderer = true;
        //创建渲染器myRenderer1
        var myRenderer1 = new THREE.SVGRenderer();
        myRenderer1.setSize(window.innerWidth / 2, window.innerHeight / 2);
        //创建渲染器myRenderer2
        var myRenderer2 = new THREE.WebGLRenderer({ antialias: true });
        myRenderer2.setSize(window.innerWidth / 2, window.innerHeight / 2);
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 0.1, 1000);
        myCamera.position.z = 4;
        var myScene = new THREE.Scene();
        myScene.background = new THREE.Color(0xffffff);
        //创建图形
        var myVertices = [];
        for (var i = 0; i <= 150; i++) {
            var v = (i / 150) * (Math.PI * 2);
            var x = Math.sin(v);
            var z = Math.cos(v);
            myVertices.push(x, 0, z);
        }
        var myGeometry = new THREE.BufferGeometry();
        myGeometry.setAttribute('position',
            new THREE.Float32BufferAttribute(myVertices, 3));
        for (var i = 1; i <= 3; i++) {
            var myMaterial = new THREE.LineBasicMaterial({
                color: Math.random() * 0xffffff,
                linewidth: 20
            });
            var myLine = new THREE.Line(myGeometry, myMaterial);
            myLine.scale.setScalar(i / 3);
            myScene.add(myLine);
        }
        //渲染图形
        animate();
        function animate() {
            var myOffset = 0;
            var myTime = performance.now() / 1000;
            myScene.traverse(function (child) {
                child.rotation.x = myOffset + (myTime / 3);
                child.rotation.z = myOffset + (myTime / 4);
                myOffset++;
            });
            var myRenderer = myRenderer1;
            $("#myContainer").html('');
            if (isSVGRenderer) { myRenderer = myRenderer1; }
            else { myRenderer = myRenderer2; }
            $("#myContainer").append(myRenderer.domElement);
            myRenderer.render(myScene, myCamera);
            requestAnimationFrame(animate);
        }
        //响应单击“启用SVG渲染器”按钮
        $("#myButton1").click(function () {
            isSVGRenderer = true;
        });
        //响应单击“启用WebGL渲染器”按钮
        $("#myButton2").click(function () {
            isSVGRenderer = false;
        });
    </script>
</body>

</html>

# javascript # webgl # 开发语言
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局