个人中心
gpt4 book ai didi

javascript - 在 HTML5 Canvas 中渲染三个 js 场景

转载 作者：太空狗 更新时间：2023-10-29 15:53:58 25 4
gpt4 key购买 nike

我不知道如何在我的索引页面上的 Canvas 中渲染 Three-js 场景。我有 Canvas 的基础模板和三js场景的基础模板。那么如何在我的 Canvas 中渲染场景呢？

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Jquery links-->
    <script src="node_modules/jquery/dist/jquery.min.js" rel="script"></script>
    <!-- Bootstrap links -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" rel="script"></script>
    <!--Three-js links-->
    <script src="node_modules/three-js/three.js" rel="script"></script>
    <!-- Custom css and javascript links -->
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/canvas.js" rel="script"></script>
    <script src="js/artifactScene.js" rel="script"></script>
    <title></title>

</head>

<body onload="start()">
    <div class="container">

        <div id="indexRowOne" class="row">
            <!--#region sidebarColumn-->
            <div id="sidebarColumn" class="col-md-3 pull-left">
                <div class="sidebarContainer">
                    <button><img src="img/egyptMenuGlyph.png"><h4>Ancient Egypt</h4></button>
                    <button><img src="img/greeceMenuGlyph.png"><h4>Ancient Greece</h4></button>
                    <button><img src="img/romeMenuGlyph.png"><h4>Ancient Rome</h4></button>
                </div>
            </div>
            <!--#endregion sidebarColumn-->

            <div id="canvasColumn" class="col-md-6">
                <div class="canvasContainer">
                    <canvas id="artifactCanvas">
                    </canvas>
                </div>
            </div>

            <div id="artifactColumn" class="col-md-3 pull-right">
                <div class="artifactFrameDiv" >
                    <img src="artifacts/egypt/graniteHeadofAmenemnat/headOfAhkhmenet.png" class="artifactImage">
                    <img src="artifacts/egypt/horus_falcon/horusFalcon.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                    <img src="img/test.png">
                </div>
            </div>
        </div>
    </div>
</body>

Canvas .js

var gl; // A global variable for the WebGL context

function start() {
    var canvas = document.getElementById("artifactCanvas");
    // Initialize the GL context
    gl = initWebGL(canvas);
    canvas.width = 673;
    canvas.height = 472;
    // Only continue if WebGL is available and working
    if (!gl) {
        return;
    }
    // Set clear color to black, fully opaque
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // Enable depth testing
    gl.enable(gl.DEPTH_TEST);
    // Near things obscure far things
    gl.depthFunc(gl.LEQUAL);
    // Clear the color as well as the depth buffer.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
function initWebGL(canvas) {
    gl = null;
    // Try to grab the standard context. If it fails, fallback to experimental.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    // If we don't have a GL context, give up now
    if (!gl) {
        alert("Unable to initialize WebGL. Your browser may not support it.");
    }
    return gl;
}

artifactScene.js

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();

最佳答案

您可以通过

指定现有 Canvas 
var renderer = new THREE.WebGLRenderer( { canvas: artifactCanvas } );

例子: http://jsfiddle.net/w3wna04q/1/

关于javascript - 在 HTML5 Canvas 中渲染三个 js 场景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41786413/

25 4 0
文章推荐： android - Android中的自定义 Activity 过渡动画
文章推荐： c - 如何找到从 1 到 n 和从 n+1 到 m 的和相同的数对
文章推荐： android - 单击按钮为多个编辑文本生成动态 ID
文章推荐： android - 无法对非静态方法 getAssets() 进行静态引用 - 在 fragment 中播放音频时遇到问题
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com