How do I use php with three js

Hi, 3 weeks ago I finished Bruno Simon’s course and I was wondering how to include three.js in my project, which was in PHP, so I spent almost 2 weeks now trying to figure it. I didn’t find any video on Youtube that might help me. I tried using webpack as Bruno answered me on the help section in discord but the import didn’t work and also could not use a dev server, I had to built the project and replace the htdocs xampp files everytime wich was very tedious. This is the code from the webpack project:

index.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
</head>
<body>
    <script src="bundle.js"></script>
    <canvas class="webgl"></canvas>
</body>
</html>

index.js:

import './main.css';
import * as THREE from 'three';

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Sizes
const width = 800
const height = 600

// Scene
const scene = new THREE.Scene()

// Object
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({
    color: '#ff0000'
})
const cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cubeMesh)

// Camera
const camera = new THREE.PerspectiveCamera(75, width / height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(width, height)
renderer.render(scene, camera)

And a photo of it to see it more clear:
image

Please if you need more information about the code tell me. Thanks

1 Like

everything you see in /dist is self contained, you can upload it everywhere. there are no imports in that code any longer. so just include the bundle.js with a script tag, give your html a canvas, root tag whatever (look into dist/index.html) and it will work. may i ask though, for what do you need php? hard to imagine spending 2 weeks making a website show. is it possible to throw it out?

Hey, first of all, thanks for your assistance, well what I meant with " the import didn’t work" was that even after using ``npm install --save three , the import * as THREE from ‘three’; ``` on index.js was not working properly because nothing showed up on the screen and that code im sure that was nothing wrong with it since it was on Bruno’s course. And I made a website, well, started it, some months ago just to use what I learnt and try to make it as nice and clean as possible, so I thought that including three.js using what I learnt from the course would be great. As I said, on the course, everything was done using webpack while my website didn’t, and the main file was index.php because I need it to retrieve some things from a MySQL database. I thought that adapting my project to webpack would be great since I read on a forum that it optimises the code, but anyways I am just trying on “draft” projects like this one until I find the way to adapt my real project to webpack.

(/cc javascript - How do I use PHP with three js - Stack Overflow)

I think that “how to use php with three.js” might be the wrong question to get answers that are helpful to you. JavaScript files are static content from a webserver’s perspective, it doesn’t particularly matter what JS libraries (three.js or otherwise) you are using.

In the past I have used NGINX to serve static files along with a PHP server, but there are many other ways of serving static content associated with a PHP server.

Hey guys nevermind, I am just an idiot, you just have to make your project normally, and then once you build it, you can just change your index.html file to index.php and it works fine

HI I need your help… I am facing the same issue & I don’t know how can I solve this issue. I have my website in php. I make parallax particles file via using three.js in html when I convert it in php its not working, it’s not showing ay thing just showing black screen. On localhost it showing errors.

Show your code

Here is code, when I change its extension from html to php, its stop working.

<head>

    <title>three.js webgl - effects - parallax barrier</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
body { margin: 0; background-color: #000; color: #fff; font-family: Monospace; font-size: 13px; line-height: 24px; overscroll-behavior: none; } a { color: #ff0; text-decoration: none; } a:hover { text-decoration: underline; } button { cursor: pointer; text-transform: uppercase; } #info { position: absolute; top: 0px; width: 100%; padding: 10px; box-sizing: border-box; text-align: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 1; /* TODO Solve this in HTML */ } a, button, input, select { pointer-events: auto; } .lil-gui { z-index: 2 !important; /* TODO Solve this in HTML */ } @media all and ( max-width: 640px ) { .lil-gui.root { right: auto; top: auto; max-height: 50%; max-width: 80%; bottom: 0; left: 0; } } #overlay { position: absolute; font-size: 16px; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0,0,0,0.7); } #overlay button { background: transparent; border: 0; border: 1px solid rgb(255, 255, 255); border-radius: 4px; color: #ffffff; padding: 12px 18px; text-transform: uppercase; cursor: pointer; } #notSupported { width: 50%; margin: auto; background-color: #f00; margin-top: 20px; padding: 10px; }
</head>

<body>

    <!-- <div id="info">

        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - parallax barrier<br/>

        skybox by <a href="https://www.pauldebevec.com/" target="_blank" rel="noopener">Paul Debevec</a>

    </div> -->

    <script type="module">

        import * as THREE from '../build/three.module.js';

        import { ParallaxBarrierEffect } from './jsm/effects/ParallaxBarrierEffect.js';

        let container, camera, scene, renderer, effect;

        const spheres = [];

        let mouseX = 0;

        let mouseY = 0;

        let windowHalfX = window.innerWidth / 2;

        let windowHalfY = window.innerHeight / 2;

        document.addEventListener( 'mousemove', onDocumentMouseMove );

        init();

        animate();

        function init() {

            container = document.createElement( 'div' );

            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );

            camera.position.z = 3;

            camera.focalLength = 3;

            const path = "textures/cube/pisa/";

            const format = '.png';

            const urls = [

                path + 'px' + format, path + 'nx' + format,

                path + 'py' + format, path + 'ny' + format,

                path + 'pz' + format, path + 'nz' + format

            ];

            const textureCube = new THREE.CubeTextureLoader().load( urls );

            scene = new THREE.Scene();

            // scene.background = textureCube;

            const geometry = new THREE.SphereGeometry( 0.1, 32, 16 );

            const material = new THREE.MeshBasicMaterial( { color: 0xd6b37c, envMap: textureCube } );

            for ( let i = 0; i < 100; i ++ ) {

                const mesh = new THREE.Mesh( geometry, material );

                mesh.position.x = Math.random() * 10 - 5;

                mesh.position.y = Math.random() * 10 - 5;

                mesh.position.z = Math.random() * 10 - 5;

                mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

                scene.add( mesh );

                spheres.push( mesh );

            }

            //

            renderer = new THREE.WebGLRenderer();

            renderer.setPixelRatio( window.devicePixelRatio );

            container.appendChild( renderer.domElement );

            const width = window.innerWidth || 2;

            const height = window.innerHeight || 2;

            effect = new ParallaxBarrierEffect( renderer );

            effect.setSize( width, height );

            //

            window.addEventListener( 'resize', onWindowResize );

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;

            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

            effect.setSize( window.innerWidth, window.innerHeight );

        }

        function onDocumentMouseMove( event ) {

            mouseX = ( event.clientX - windowHalfX ) / 100;

            mouseY = ( event.clientY - windowHalfY ) / 100;

        }

        //

        function animate() {

            requestAnimationFrame( animate );

            render();

        }

        function render() {

            const timer = 0.0001 * Date.now();

            camera.position.x += ( mouseX - camera.position.x ) * .05;

            camera.position.y += ( - mouseY - camera.position.y ) * .05;

            camera.lookAt( scene.position );

            for ( let i = 0, il = spheres.length; i < il; i ++ ) {

                const sphere = spheres[ i ];

                sphere.position.x = 5 * Math.cos( timer + i );

                sphere.position.y = 5 * Math.sin( timer + i * 1.1 );

            }

            effect.render( scene, camera );

        }

    </script>

</body>

Whech errors?

DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_detection.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME